高德地图自定义绘制园区区域,区域描边,并添加自定义内容maker标注
绘制自定义区域
绘制自定义区域第一步需要获取指定区域的边界坐标点list,可以在高德地图官网的工具中获取 高德选点工具,拿到区域边界点list后就是绘制,区域绘制有几种方式,具体可查看高德的API,大体可用Wall和Prism两种方式,区别是wall没有区域填充颜色,Prism可以填充,所以我选择使用Prism进行绘制区域。Prism需要Object3DLayer承载,所以先添加个Object3DLayer,然后将绘制的Prism增加到Object3DLayer中,高德API中也有详细介绍。
// path数据结构为 [{longitude:11.11,latitude:22.22}]
path = path.map((el)=>{return new AMap.LngLat(el.longitude,el.latitude)})
let object3Dlayer = new AMap.Object3DLayer();this.map.add(object3Dlayer);let height = -3000; // 区域高度 设置为负有种区域凸起的3D感let color = 'rgba(16,73,175,0.35)'; // rgbalet prism = new AMap.Object3D.Prism({path: path, // 这里就是对应的点位数组 注意需要对数字经纬度循环生成 AMap.LngLatheight: height,color: color});prism.transparent = true;object3Dlayer.add(prism)
这样区域就绘制出来了
绘制边界
下一步给区域增加描边,这样区域的边界感更加明显,效果更好,描边选择Polyline 绘制,注意绘制线需要首尾闭合,所以点位list的最后需要增加一个点位的开始position
path.push(new AMap.LngLat(data[0].longitude,data[0].latitude))
//添加区域描边new AMap.Polyline({path: path,strokeColor: "#178DFF",strokeWeight: 4,map: this.map,lineJoin: 'round',lineCap: 'round',});
这样基本的区域填充和边界描边就好了,基本效果实现,下面就是在区域中增加maker,如站点,设备标注等。
添加自定义maker
高德的maker需要传入img地址,label等参数,有时候限制较多,我们可以设置自定义内容,传入自定义Dom节点,作为maker的内容,这样就没有maker展示内容的限制了,
首先要确定需要增加maker的点位坐标,同样可在高德地图选点工具中获取,确定所标注的站点、设备等坐标点
// 通过隐藏这些maker 使之不展示dom,但是Dom节点会渲染,将节点传入高德的maker这样就会作为maker的内容展示了,maker内容可随意展示 Maker为自定义的Vue组件
<div v-show="false"><Maker ref="maker" v-for="(item,index) in makers" :value="item" :key="index"></Maker></div>//sites 为需要标注的点位坐标sites.forEach((el,index)=>{let maker= new AMap.Marker({position: new AMap.LngLat(el.longitude,el.latitude),content: this.$refs.maker[index].$el, // 这里传入domoffset: new AMap.Pixel(0, -34) //这里注意偏移量,默认左上角定位在坐标点,如需dom中心对准坐标点 则需要 向左向右偏移 宽高的一半 为负数,});this.map.add(maker)})
这样区域填充,描边,点位标注就都加好了,具体展示效果如下,仅供参考
高德地图自定义绘制园区区域,区域描边,并添加自定义内容maker标注相关推荐
- 高德地图自定义绘制点标记
private void setCompanyLocation() {LatLng latLng = new LatLng(21.2283990000, 110.4032290000);MarkerO ...
- 高德地图限制绘制区域
高德地图在绘制过程中没有提供监听过程的Api:制造错误来进行中断绘制 // 创建地图createMap() {let self = this;self.center = [self.gpsAll[0] ...
- Android 高德地图自定义线路规划选择方案之后按照方案进行导航
Android 高德地图自定义线路规划选择方案之后按照方案进行导航 因为我这边导航需求的问题,导致我这边不能使用高德地图官方的线路规划和导航.所以我这边线路规划和导航界面都是根据高德地图那边给的api ...
- 高德地图自定义图标的点标记Marker--初体验(二)
点标记Marker 创建一个默认图标的点标记: 创建一个自定义图标的点标记: new AMap.Marker({}) 参数说明 本文以Marker为主,其他点标记方法大差不差 通过上两篇文章我们已经了 ...
- 高德地图web绘制省、市、区 边界线和面积图
高德地图web绘制省.市.区 边界线和面积图 高德地图官方API 图例 总结要点 申请高德地图的key 用于后边web调用 高德地图key申请 引用 <script type="tex ...
- JavaScript高德地图中绘制echarts图表随地图移动
JavaScript高德地图中绘制echarts图表随地图移动** 先上效果图 实现方法如下: 使用高德地图"信息窗体",信息窗体AMap.InfoWindow的属性content ...
- Android高德地图自定义Markers的例子
下文为各位重点介绍关于Android高德地图自定义Markers的例子,希望这篇文章能够让各位理解到Android高德地图自定义Markers的方法. 之前的博客里说了地图的嵌入和定位,今天就说说在地 ...
- vue框架中使用高德地图自定义icon问题
** vue框架中使用高德地图自定义icon问题 ** vue框架中使用高德地图自定义icon,在编译时,因为图片会有封装问题等,但是在高德地图中没有转化对应的路径,在最后结果中会出现找不到图标的问题 ...
- vue使用高德地图并且绘制多边形
使用鼠标工具在高德地图上绘制多边形时需要使用到一个插件,如果直接new出该工具会提示该工具不是一个函数之类的错误,在使用之前需要先告诉vue,你所是使用的是一个插件 AMap.plugin([&quo ...
- Android高德地图自定义Mark并实现聚合效果
Android高德地图自定义Mark并实现聚合效果 起因:公司本来项目里面用到了高德地图,然后最近老板看见别人的APP里面有个聚合的这个功能,老板:"这个效果能不能实现,我也要!" ...
最新文章
- python标准类型内建模块_Python内建模块struct实例详解
- 【Time系列三】简单的计时器(秒表)
- sap中泰国有预扣税设置吗_泰国餐厅密度细分:带有K-means聚类的python
- hadoop集群-格式化namenode节点后,从节点的datanode不能启动,或者是datanode启动到主节点上。
- 你所能用到的数据结构(六)
- NOI2018 Day1 归程(Kruskal重构树)
- [转载]MyISAM InnoDB 区别
- 在C#中调用Java代码
- 聊聊北京大部分前端从业者所面临的困境
- SWARM-BZZ的联合曲线(Bonding Curve)
- python程序设计语言中的小于等于号_Python(matplotlib)小于或等于tex中的符号
- 我的2020java社招岗面经,阿里巴巴社招面试经历(Java工程师方向)
- 【TF2】Eager Execution机制
- 上班族用哪个邮箱好用,如何正确使用邮件工作?...
- C++控制台清屏函数
- 国外免费php mysql空间_超大20G国外免费php空间 支持PHP,MYSQL数据库
- sensor_msgs/BatteryState Message
- Android唤醒锁作用,Android深度睡眠和唤醒锁
- RBAC角色访问控制
- 联发科 AI 智能核心板 - XY6877ZA(MT6877 天玑 900)