高德地图绘制省市边界，根据指标各市显示不同状态

高德api中提供了绘制边界方法，引用简单，只需传入省市名称即可，以下以江苏省示例，为演示效果数据为自定义,效果如下。

① index.html文件中引入高德地图及关键方法

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己的key值&plugin=AMap.Driving&plugin=AMap.DistrictSearch"></script>

② 组件中

<template><div class="bayonettrack"><div id="map"></div></div>
</template><script>
var map = "";
var marker = "";
export default {data() {return {map_opt: [{city: "南京",color: "red",},{city: "常州",color: "green",},{city: "镇江",color: "yellow",},{city: "扬州",color: "green",},{city: "无锡",color: "blue",},{city: "南通",color: "yellow",},{city: "苏州",color: "green",},{city: "盐城",color: "yellow",},{city: "淮安",color: "red",},{city: "宿迁",color: "blue",},{city: "连云港",color: "red",},{city: "徐州",color: "green",},{city: "泰州",color: "blue",},],marker_opt: [{name: "南京市",lal: [118.804617,31.962881],level: "AAAAA",num: "1212",},{name: "镇江市",lal: [119.484396,32.073498],level: "AAAA",num: "2323",},{name: "徐州市",lal: [117.714785,34.277433],level: "AAAA",num: "2323",},{name: "连云港市",lal: [119.144564,34.546182],level: "AAAA",num: "2323",},{name: "宿迁市",lal: [118.466066,33.80879],level: "AAAA",num: "2323",},{name: "淮安市",lal: [119.182924,33.587137],level: "AAAA",num: "2323",},{name: "扬州市",lal: [119.51526,32.677098],level: "AAAA",num: "2323",},{name: "泰州市",lal: [120.114025,32.332835],level: "AAAA",num: "2323",},{name: "南通市",lal: [121.115498,32.230665],level: "AAAA",num: "2323",},{name: "苏州市",lal: [120.703034,31.302861],level: "AAAA",num: "2323",},{name: "无锡市",lal: [120.297226,31.626742],level: "AAAA",num: "2323",},{name: "常州市",lal: [119.894852,31.747689],level: "AAAA",num: "2323",},{name: "盐城市",lal: [120.157414,33.670114],level: "AAAA",num: "2323",},],};},mounted() {this.newmap();this.hidden_map();},methods: {// 默认地图newmap() {map = new AMap.Map("map", {zoom: 8,center: [119.307549, 32.989607],mapStyle: "amap://styles/darkblue",});// 获取边界坐标点AMap.plugin("AMap.DistrictSearch", () => {var districtSearch = new AMap.DistrictSearch({// 关键字对应的行政区级别，共有5种级别level: "province",//  是否显示下级行政区级数，1表示返回下一级行政区subdistrict: 0,// 返回行政区边界坐标点extensions: "all",});for (let i = 0; i < this.map_opt.length; i++) {// 搜索所有省/直辖市信息districtSearch.search(this.map_opt[i].city, (status, result) => {// 查询成功时，result即为对应的行政区信息this.handlePolygon(result, this.map_opt[i].color);});}this.handleMarker()});},// 根据坐标点画边界handlePolygon(result, color) {let bounds = result.districtList[0].boundaries;if (bounds) {for (let i = 0, l = bounds.length; i < l; i++) {//生成行政区划polygonlet polygon = new AMap.Polygon({map: map, // 指定地图对象strokeWeight: 1, // 轮廓线宽度path: bounds[i], //轮廓线的节点坐标数组fillOpacity: 0.4, //透明度fillColor: color, //填充颜色strokeColor: "#256edc", //线条颜色});// polygon.on('click', (e) => {// 点击绘制的区域时执行其他交互//// })}// 地图自适应// map.setFitView();}},// 隐藏周边多余地图hidden_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].boundaries;var pathArray = [outer];pathArray.push.apply(pathArray, holes);var polygon = new AMap.Polygon({pathL: pathArray,//线条颜色，使用16进制颜色代码赋值。默认值为#006600strokeColor: "rgb(20,164,173)",strokeWeight: 1,//轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9strokeOpacity: 0,//多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00fillColor: "rgba(0,0,0)",//多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9fillOpacity: 1,//轮廓线样式，实线:solid，虚线:dashedstrokeStyle: "solid",/*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在    ie9+浏览器有效 取值： 实线：[0,0,0] 虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实 线和10个像素的空白 （如此反复）组成的虚线*/strokeDasharray: [10, 2, 10],});polygon.setPath(pathArray);map.add(polygon);});},// marker点指标handleMarker() {for (let i = 0; i < this.marker_opt.length; i++) {marker = new AMap.Marker({position: this.marker_opt[i].lal,map: map,offset: new AMap.Pixel(-30, -20), //相对于基点的偏移位置content: `<div class='info'>${this.marker_opt[i].name}<br/>${this.marker_opt[i].level}<br/>${this.marker_opt[i].num}</div>`,});}},},
};
</script><style scoped lang="less">
.bayonettrack {width: 100%;height: 100%;#map {width: 100%;height: 100%;}
}
</style>

③ 设置marker点弹窗样式

.info{width: 60px;height: 50px;background: #fff;border-radius: 20px;font-size: 12px;text-align: center;
}

高德地图绘制省市边界，根据指标各市显示不同状态相关推荐

高德地图绘制行政边界
行政边界大都用shape文件承载,而高德地图没有直接绘制shape文件的接口,需要从shape文件中提取坐标信息,再使用高德地图的drawLine等api接口进行绘制,具体步骤如下: 1.打开ArcM ...
vue高德地图绘制行政区边界
<template><div id="gaodeMap"></div> </template><script>impor ...
H5数据可视化(高德地图绘制行政区)
1.高德地图可视化项目搭建参考我的上篇文章完成基本搭建:H5数据可视化(高德地图构建项目) 2.使用高德行政区查询该部分主要参照官方教程即可,其中使用行政区划查询服务前要先引入该插件,具体的引入方 ...
vue2+高德地图绘制多个圆形覆盖物和多边形覆盖物
vue2+高德地图绘制圆形覆盖物以及多边形覆盖物直接贴代码直接贴代码添加复选款 <el-checkbox v-model="checkedAri" @change=&q ...
高德地图-绘制去程和回程路线
1.问题背景设置去程和回程的路线图,并用不同的颜色设置路线 2.实现源码 <!doctype html> <html> <head><meta charse ...
使用高德地图绘制矩形网格，显示行政区域。
高德地图绘制矩形网格认证开发者账号替换成自己的key 效果展示代码地址:https://gitee.com/aimazhe/LocationMap.git 注册高德开发者账号:https://l ...
解决高德地图锁屏黑屏定位不更新，高德地图绘制定位轨迹，高德定位判断定位停留点，高德地图将所有坐标绘制在可视区域内
本文章主要介绍高德定位锁屏黑屏定位不更新的问题. 实现流程是:程序开始阶段正常执行定位,注册监听锁屏监听,唤醒cpu监听,当锁屏广播每2秒发起一起单次定位唤醒.源码如下: package net. ...
高德地图进行省市下钻（vue）
高德地图本身就提供了省市下钻的功能,但是官网提供的下钻功能带有一个省份树,一般我们开发的过程中,主要是要用到下钻的功能而已,所以在这我就用vue的方式,只提取出来了下钻的功能. 官网地址:https: ...
android高德地图绘制多边形_Android安卓高德地图实现多边形绘制与编辑
需求:使用高德地图api实现多边形的绘制与编辑,从而实现圈中房屋的效果. 在js中有相关插件,效果很好.点我跳转但是在高德开放平台中并未找到安卓ios的相关插件或者方法,于是提交工单,5个工作日才能 ...

高德地图绘制省市边界，根据指标各市显示不同状态

高德地图绘制省市边界，根据指标各市显示不同状态相关推荐

最新文章

热门文章