高德地图按行政区描边

1，官网

https://lbs.amap.com/api/javascript-api/reference/overlay#polyline

2,我的使用

先创建地图：

const Map = new AMap.Map(that.idHash, {mask: mask, //只显示包裹起来的区域resizeEnable: true, //是否监控地图容器尺寸变化showIndoorMap: false, //关闭室内地图center: [96.01909121185537, 35.874643454131984],viewMode: "3D",dragEnable: false, //初始状态下不可移动// pitch:5,zoom: 7,features: that.depFeatures, //初始色块模式下，不显示标注等信息mapStyle: "amap://styles/021981e1781074e215441507a954df4b" //设置地图的显示样式});

编写描边的代码：

    //所有行政区描边allborderLine(Map) {const that = this;that.borderLine("海西蒙古族藏族自治州", Map);that.borderLine("海东市", Map);that.borderLine("海南藏族自治州", Map);that.borderLine("海北藏族自治州", Map);that.borderLine("果洛藏族自治州", Map);// that.borderLine('黄南藏族自治州',Map)//黄南中间有块地皮是海南自治区的，不能描边，采用省描边加邻区描边来作为它的边that.borderLine("玉树藏族自治州", Map);that.borderLine("西宁市", Map);},//行政区描边的功能borderLine(city, Map) {const opts = {subdistrict: 0,extensions: "all",level: "city"};//直接通过经纬度构建mask路径// eslint-disable-next-line no-undefconst district = new AMap.DistrictSearch(opts);district.search(city, function(status, result) {const bounds = result.districtList[0].boundaries;//添加描边for (let i = 0; i < bounds.length; i += 1) {// eslint-disable-next-line no-undefnew AMap.Polyline({path: bounds[i],strokeColor: "#1a77aa",strokeWeight: 10,strokeOpacity: 0.9,map: Map});}});},

在地图上描边：

//按行政区描边that.allborderLine(Map);

高德地图按行政区描边相关推荐

H5数据可视化(高德地图绘制行政区)
1.高德地图可视化项目搭建参考我的上篇文章完成基本搭建:H5数据可视化(高德地图构建项目) 2.使用高德行政区查询该部分主要参照官方教程即可,其中使用行政区划查询服务前要先引入该插件,具体的引入方 ...
高德地图按行政区划分填充色块
实现的效果: 项目地址:https://gitee.com/ling-xu/gaud-map-vue 关键代码: <template><div:id="idHash&quo ...
vue高德地图绘制行政区边界
<template><div id="gaodeMap"></div> </template><script>impor ...
高德地图获取行政区一直报no_data
代码 let that = this this.map = new AMap.Map('container', {zoom: 20, // 级别center: [120.26, 30.18], // ...
根据经纬度确定行政区域_基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标...
前言近来由于工作需要,需要提取某些城市的经纬度坐标,稍微搜索了一下,发现百度地图和高德地图都提供了相关的函数和例子.那么剩余的工作也就比较简单了,保存坐标,然后转换为WGS坐标,这样才能和现有的GP ...
VUE2.0实现高德地图选择地点后进行行政区边界划分
最终效果图: 最终效果达到选择全部就描绘当前级联选择框下面的所有行政区,第二级开始描绘上一层加当前所有行政区预备知识: vue2.0.组件间传值.高德地图API(提前去高德地图提供的服务处申请好ke ...
前端系列——vue2+高德地图web端开发（行政区边界绘制）
vue2+高德地图web端开发(行政区边界绘制) 前言原理基础实现步骤 1.eslint设置AMap为全局变量放置报错 2.Search.vue传输给MapContainer.vue数据然后进行 ...
java aoi 服务器地图_GitHub - WanZixin/getShp: 利用高德地图web服务API获取坐标串，生成行政区和aoi的shp文件...
爬取数据生成shp文件 1.功能简介共有两大功能,一个功能是根据高德地图web服务API获取行政区划坐标串,写入行政区shp文件:另一个功能是根据高德地图的接口获取poi坐标串,写入aoi(area ...
高德地图API显示行政区边界
基础骨架设置 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
高德地图实现展示多个规划的路线
各位只需要掌握如果展示一条线路再看本文,就会展示多条线路了各位只需要掌握如果展示一条线路再看本文,就会展示多条线路了各位只需要掌握如果展示一条线路再看本文,就会展示多条线路了你能看懂本文的前提是 ...

高德地图按行政区描边

1，官网

2,我的使用

高德地图按行政区描边相关推荐

最新文章

热门文章