高德地图3D城市地图实现gps打点可视化数据显示

<template><div id="amapContainer"></div>
</template><script>
export default {name: 'amap3d',data () {return {};},mounted () {this.intAmap();},methods: {drawMap (city = '北京市', LngLats) {const AMap = this.AMap;const opts = {subdistrict: 0,extensions: 'all',level: 'city'};//利用行政区查询获取边界构建mask路径//也可以直接通过经纬度构建mask路径const district = new AMap.DistrictSearch(opts);district.search(city, function (status, result) {const bounds = result.districtList[0].boundaries;const mask = []for (let i = 0; i < bounds.length; i += 1) {mask.push([bounds[i]])}const map = new AMap.Map('amapContainer', {mask: mask,center: [116.501415, 39.926055],disableSocket: true,viewMode: '3D',showLabel: false,labelzIndex: 130,pitch: 40,zoom: 10,mapStyle: "amap://styles/darkblue",// 卫星地图显示layers: [new AMap.TileLayer.RoadNet({//rejectMapMask:true}),new AMap.TileLayer.Satellite()]});//添加高度面 v 2.0 版本引用这个3D方法直接报错let object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });map.add(object3Dlayer)const height = -20000;const color = '#0088ffcc';//rgbaconst wall = new AMap.Object3D.Wall({path: bounds,height: height,color: color});wall.transparent = true;// 添加覆盖物(LngLats || []).forEach(v => {const position = new AMap.LngLat(v.Lng, v.Lat);// 点标记显示内容，HTML要素字符串const markerContent = '' +`<div class="custom-content-marker zyc-marker-icon"><img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png"><div class="close-btn" onclick="clearMarker()">X</div><div class="content"><p>设备数量： 15545</p><p>人员数量： 5842</p><p>摄像头数量： 96874</p></div></div>`;new AMap.Marker({position: position,// 将 html 传给 contentcontent: markerContent,// 以 icon 的 [center bottom] 为原点offset: new AMap.Pixel(-13, -30),map: map  // 添加到对应的map地图实例});});object3Dlayer.add(wall);//添加描边for (let i = 0; i < bounds.length; i += 1) {new AMap.Polyline({path: bounds[i],strokeColor: '#99ffff',strokeWeight: 4,map: map})}});},// 地图初始化intAmap (callBack) {this.AMap = window.AMap;this.AMap.plugin(['AMap.MouseTool', 'AMap.PolyEditor', 'AMap.ControlBar', 'AMap.DistrictSearch', 'Map3D', 'AMap.Object3DLayer'], function () {//TODO  创建控件并添加});if (callBack && typeof callBack == 'function') {callBack();}this.drawMap('北京市', [{Lng: 116.501415, Lat: 39.926055},{Lng: 116.474605, Lat: 39.946324},{Lng: 116.343799, Lat: 39.991844},{Lng: 116.324573, Lat: 39.872586}]);}}
}
</script>
<style lang="scss">
#amapContainer {.custom-content-marker {position: relative;width: 25px;height: 34px;img {width: 100%;height: 100%;}.close-btn {position: absolute;top: -6px;right: -8px;width: 15px;height: 15px;font-size: 12px;background: #ccc;border-radius: 50%;color: #fff;text-align: center;line-height: 15px;box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);}.close-btn:hover {background: #666;}.content {position: absolute;left: 20px;top: 10px;height: 100px;width: 200px;background: rgba(10, 10, 10, 0.7);p {padding:5px 10px;color:#fff;font-size: 14px;text-align:left;}}}
}
</style>
<style lang="scss" scoped>
#amapContainer {height: 800px;width: 100%;margin: 0 auto;
}
</style>

高德地图3D城市地图实现gps打点可视化数据显示相关推荐

echart 广州3d_echarts绘制3D城市地图
使用echarts 绘制中国地图/各省地图/市级地图的3D地图先上效果图javascript 中国 html 四川省 java 成都市 git 3D地图说明经过使用 series-map3D ...
java 室内3d_室内地图制作-首款实时室内绘制室内地图-3D室内地图
室内地图制作经过易景空间地图团队的持续优化迭代,新版本地图编辑器中的画圆柱体.模型库.快速画道路.房间直接换纹理贴图等功能终于上线了,目前市面上一款无需安装软件就能直接使用浏览器访问的在线室内地图 ...
Echartds-gl (3D) 城市地图，点击事件，实现下钻等操作
在可视化项目中,实现鼠标点击那一块就拿到那一块的数据 let areaData=''; // 定义一个变量用于存储鼠标经过的区域data emphasis: {disabled: true, // ...
html Antv L7 + mapbox 实现3D地图 3D中国地图不限于中国地图
echarts的3D地图实在太丑了,还一堆bug 使用阿里的Antv可视化库L7,实现3D地图,底图是mapbox 参考示例:https://l7.antv.antgroup.com/zh/examp ...
android 百度地图切换城市地图,android百度地图：卫星地图普通地图交通地图切换...
在基础地图模式上,增加了普通图和卫星图的切换,以及是否增加交通图的图层. public class LayersDemo extends Activity { /** * MapView 是地图主控件 ...
python 画一张中国地图 geopandas 城市地图 DATAV.GeoAtlas
地图json获取: DATAV.GeoAtlas http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=10 ...
【高德地图进阶】--- 3d城市版块之wall
在之前的文章描述了如何通过prism绘制3d城市版块,这篇文章将采用另外的方式来实现3d版块的制作 AMap.Object3D.Wall wall 见名知意,这个api就是绘制墙的, 也可以看做是有高 ...
高德地图3D轨迹回放 + 视野跟随功能
高德地图3D轨迹回放 + 视野跟随功能概述代码实现步骤完整代码 (需要添加一个2.0的key) 概述若有帮助到你,麻烦点一波关注,博主会持续推出Echarts,D3,地图,Three.js方面 ...
从2D地图到3D城市模型的概略路线
对包括道路和城市在内的这些密集使用的地理要素制作地图的需求一直在稳步提升.这是因为如今的城市化率需要详细的及时更新的三维地理数据.这些数据帮助城市管理者规避居住性下降,限制水.空气和噪声污染,改善公平 ...

高德地图3D城市地图实现gps打点可视化数据显示

高德地图3D城市地图实现gps打点可视化数据显示相关推荐

最新文章

热门文章