高德开放平台实现区域地图+云图标记
生活随笔
收集整理的這篇文章主要介紹了
高德开放平台实现区域地图+云图标记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在項目中需要使用類似GIS效果的地圖，考慮到高德開放平臺關于云圖的便利性，便利用官網和網上的例子，進行了初步實現。
1.帶3D效果：
2.代碼：
<!doctype html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>編輯多邊形</title><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=760d16c25fa8ee3c547b693a6c414821&plugin=Map3D,AMap.DistrictSearch"></script><style>html,body,#container {margin: 0;height: 100%;}</style> </head> <body><div id="container"></div><script>var mask = [];var map = new AMap.Map('container', {mask: mask,resizeEnable: true,zoom: 12,viewMode: '3D',center: [121.124178, 31.150681],mapStyle: 'amap://styles/5a2dbb143362de08809a8aebe25ca455',//layers: [// new AMap.TileLayer.RoadNet({// zIndex: 20// })]//,// new AMap.TileLayer({// zIndex: 6,// opacity: 1,//getTileUrl: 'https://t{1,2,3,4}.tianditu.gov.cn/DataServer?T=ter_w&x=[x]&y=[y]&l=[z]'//getTileUrl: 'https://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=5ecfe4e0cecdafec9a858e37c261084c'//})]});map.plugin('AMap.CloudDataLayer', function () {var layerOptions = {query: { keywords: '' },clickable: true};var cloudDataLayer = new AMap.CloudDataLayer('5cbec0902376c10e3dec70d6', layerOptions); //實例化云圖層類cloudDataLayer.setMap(map); //疊加云圖層到地圖});new AMap.DistrictSearch({extensions: 'all',subdistrict: 0}).search('青浦區', function (status, result) {// 外多邊形坐標數組和內多邊形坐標數組var outer = [new AMap.LngLat(-360, 90, true),new AMap.LngLat(-360, -90, true),new AMap.LngLat(360, -90, true),new AMap.LngLat(360, 90, true),];var holes = result.districtList[0].boundariesvar pathArray = [outer];for (var i = 0; i < holes.length; i += 1) {mask.push([holes[i]])}pathArray.push.apply(pathArray, holes)var polygon = new AMap.Polygon({pathL: pathArray,strokeColor: '#00eeff',strokeWeight: 1,fillColor: '#71B3ff',fillOpacity: 0.5});polygon.setPath(pathArray);map.add(polygon);var bounds = map.getBounds(); // 獲取顯示范圍map.setLimitBounds(bounds); // 限制地圖顯示范圍var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });map.add(object3Dlayer)var height = -8000;var color = '#0088ffcc';//rgbavar wall = new AMap.Object3D.Wall({path: holes,height: height,color: color});wall.transparent = trueobject3Dlayer.add(wall)});</script></body> </html>3.不帶3D效果。帶彈窗
4.代碼：
<!doctype html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>編輯多邊形</title><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=760d16c25fa8ee3c547b693a6c414821&plugin=AMap.DistrictSearch,Map3D"></script><script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script><style>html,body,#container {margin: 0;height: 100%;}</style> </head> <body><div id="container"></div><script>var map = new AMap.Map('container', {resizeEnable: true,zoom: 12,viewMode: '3D',center: [121.124178, 31.150681],mapStyle: 'amap://styles/5a2dbb143362de08809a8aebe25ca455',//layers: [// new AMap.TileLayer.RoadNet({// zIndex: 20// })]//,// new AMap.TileLayer({// zIndex: 6,// opacity: 1,//getTileUrl: 'https://t{1,2,3,4}.tianditu.gov.cn/DataServer?T=ter_w&x=[x]&y=[y]&l=[z]'//getTileUrl: 'https://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=5ecfe4e0cecdafec9a858e37c261084c'//})]});new AMap.DistrictSearch({extensions: 'all',subdistrict: 0}).search('青浦區', function (status, result) {// 外多邊形坐標數組和內多邊形坐標數組var outer = [new AMap.LngLat(-360, 90, true),new AMap.LngLat(-360, -90, true),new AMap.LngLat(360, -90, true),new AMap.LngLat(360, 90, true),];var holes = result.districtList[0].boundariesvar pathArray = [outer];pathArray.push.apply(pathArray, holes)var polygon = new AMap.Polygon({pathL: pathArray,strokeColor: '#00eeff',strokeWeight: 1,fillColor: '#71B3ff',fillOpacity: 0.5});polygon.setPath(pathArray);map.add(polygon);var bounds = map.getBounds(); // 獲取顯示范圍map.setLimitBounds(bounds); // 限制地圖顯示范圍});map.plugin('AMap.CloudDataLayer', function () {var layerOptions = {query: { keywords: '' },clickable: true};var cloudDataLayer = new AMap.CloudDataLayer('5cbec0902376c10e3dec70d6', layerOptions); //實例化云圖層類cloudDataLayer.setMap(map); //疊加云圖層到地圖AMap.event.addListener(cloudDataLayer, 'click', function (result) {var clouddata = result.data;var photo = [];if (clouddata._image[0]) {//如果有上傳的圖片photo = ['<img width=240 height=100 src="' + clouddata._image[0]._preurl + '"><br>'];}var infoWindow = new AMap.InfoWindow({content: "<font class='title'>" + clouddata._name + "</font><hr/>" + photo.join("") + "地址：" + clouddata._address + "<br />" + "聯系電話：" + clouddata.telephone + "<br />" + "經緯度：" + clouddata._location,size: new AMap.Size(0, 0),autoMove: true,offset: new AMap.Pixel(0, -25)});infoWindow.open(map, clouddata._location);console.log(clouddata._name);});});</script></body> </html>不足：無法實現在云圖中添加文本標簽，無法標記這些點的名稱，而是需要設置彈窗點擊事件。要是有完成這部分的煩請留言，不勝感激。
總結
以上是生活随笔為你收集整理的高德开放平台实现区域地图+云图标记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python cv2摄像头校准，坐标系转
- 下一篇： 浅谈个人大数据