高德开放平台实现区域地图+云图标记

在项目中需要使用类似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>

不足：无法实现在云图中添加文本标签，无法标记这些点的名称，而是需要设置弹窗点击事件。要是有完成这部分的烦请留言，不胜感激。

高德开放平台实现区域地图+云图标记相关推荐

高德开放平台与360儿童手表达成合作，全球数据助力第三方企业
3月29日下午,国内互联网安全企业 360 对外发布了全新儿童春季智能新品.360 儿童手表与国内领先的 LBS 服务提供商高德开放平台达成合作,可通过定位等多项功能,让家长随时掌握孩子的动态,保障儿 ...
python爬取地图上的经纬度_使用高德开放平台api批量爬取所需经纬度及位置信息(平台教程和python多进程、多线程代码详解)...
2019.3.20更新(将代码升级为非阻塞式多进程,效率极大提升) 2019.6.28更新 (将代码模块化,复用性更强,使用更高效的线程池进行爬取) 之前写爬虫对链家某地区全部二手房信息进行了获取并存 ...
mysql高德地图设计_基于高德开放平台Map Lab的数据可视化
在Map Lab上创建可视化项目,首先需要添加数据.添加数据有4种方式,分别是: 上传CSV文件添加数据上传Excel文件添加数据连接在线数据库添加数据提供在线数据API添加数据一.数据上传说 ...
高德开放平台发布“GAIA计划”，打造“组件式”解决方案
今日,高德开放平台在北京举办2018战略说明会,正式对外发布了"GAIA计划",宣布将为合作伙伴提供针对包括网约车.海外.货运.游戏等行业"组件式"的垂类解决方 ...
高德开放平台定位功能对接
[高德开放平台] 定位对接萌璐琉璃 https://www.jianshu.com/p/312287e25444 目标对接高德开放平台的定位接口依赖 <!-- httpclient 工具类 ...
高德天气 php,高德开放平台天气查询API
更多内容,请查看博客原文:高德开放平台天气查询API https://finolo.gy/2020/01/高德开放平台天气查询API/ 高德开放平台下的天气查询接口文档 https://lbs.ama ...
接入高德开放平台实现地址转换为经纬度坐标
高德地图API 1 地址转为经纬度后台人员填写完房源详情地址后,由此地址转为,电子地图中的经纬度.从而方便日后前台在电子地图中的标识显示. 高德地图开放平台:https://lbs.amap.co ...
python高德查询县_Python和高德开放平台——地名地址空间化及采集POI信息
上一篇我们介绍微博开放平台时说道了通过高德开放平台获取地名地址的坐标,今天我们来说一说怎么使用高德开放平台查询相关关键词的地址坐标,或者采集学校.医院.餐厅.公园.企业等POI的信息. 高德开放平台h ...
高德开放平台天气查询API
更多内容,请查看博客原文:高德开放平台天气查询API https://finolo.gy/2020/01/高德开放平台天气查询API/ 高德开放平台下的天气查询接口文档 https://lbs.ama ...

高德开放平台实现区域地图+云图标记

1.带3D效果：

2.代码：

3.不带3D效果。带弹窗

4.代码：

高德开放平台实现区域地图+云图标记相关推荐

最新文章

热门文章