高德行政区划地图，区域划线，行政区划浏览

效果图

代码

<!--* @Author: DZM* @Date: 2022-03-16 18:25:07* @LastEditors: tianwang* @LastEditTime: 2022-03-16 18:57:13* @Description:
-->
<template lang=""><div><div ref="map" class="map"></div><el-switchv-model="areaLineSwitch"@change="areaLineChange"active-text="开启"inactive-text="关闭"></el-switch></div>
</template>
<script>
export default {data() {return {areaLineSwitch: false,adcode: '110000', // 北京map: null,districtExplorer: null,zoom: 8,center: [116.407387, 39.904179]}},methods: {// 区域划线开关事件处理areaLineChange(val) {this.areaLineSwitch = val;if (val) {this.drawAreaNode();} else {this.districtExplorer && this.districtExplorer.clearFeaturePolygons();}},initMap() {const map = new AMap.Map(this.$refs.map, {mapStyle: 'dark',zoom: this.zoom,center: this.center,features: ['bg', 'point', 'road'], // 支持'bg'（地图背景）、'point'（POI点）、'road'（道路）、'building'（建筑物）resizeEnable: true, // 监控地图容器尺寸变化，默认值为falseexpandZoomRange: true // 支持可以扩展最大缩放级别，和zooms属性配合使用，设置为true的时候，zooms的最大级别在PC上可以扩大到20级});return map},initDistrictExplorer() {const { map } = this;return new Promise((resolve, reject) => {AMapUI.loadUI(["geo/DistrictExplorer"],DistrictExplorer => {resolve(new DistrictExplorer({ map, eventSupport: true }));})});},// 区划编码（adcode），区域节点（AreaNode）// 绘制行政区划（子区划）drawAreaNode() {const { districtExplorer, adcode } = this;// 加载区域内容districtExplorer.loadAreaNode(adcode, (error, areaNode) => {if (error) {console.error(error);return;}const colors = ["#F8E71C","#00FFC6","#5DFF00","#EB2F96","#FF6425","#844AFF","#00A8FF","#F81C1C","#00DBFF","#D5FF39","#87E8DE","#FF85C0","#52C41A","#FAAD14","#FFD8BF","#D9F7BE"];const colorLength = colors.length;// 绘制子级区划districtExplorer.renderSubFeatures(areaNode, (feature, i) => {const fillColor = colors[i % colorLength];return {cursor: "default",bubble: true,strokeColor: "#fff", // 线颜色strokeWeight: 1, // 线宽strokeOpacity: 1, // 线透明度fillColor, // 填充色fillOpacity: 0.2 // 填充透明度};});});},},mounted() {this.map = this.initMap();this.initDistrictExplorer().then((districtExplorer) => {this.districtExplorer = districtExplorer;});}
}
</script>
<style scoped>
.map {width: 100%;height: calc(80vh);
}
</style>

高德行政区划地图，区域划线，行政区划浏览相关推荐

android 高德定位区域,区域定位-行政区划浏览-示例中心-JS API UI 组件示例 | 高德地图API...
区域定位 html, body, #container { width: 100%; height: 100%; margin: 0px; } #locTip { position: absolute ...
高德地图实现区域下钻
高德地图实现区域下钻代码开源地址:GitHub 代码开源地址:Gitee 展示图 demo地址戳我哦转载于:https://my.oschina.net/antsdot/blog/2995997
使用高德地图服务获取全部行政区划与各个省市的地理坐标
文章目录 1. 申请高德地图Key 2. 编写python代码,访问API,解析内容 2.1 获取所有的省市分类 2.2 使用request调用API 2.3 解析json 3. 全部保存的代码 3. ...
vue 高德地图不同区域显示不同颜色_高德百度哪家强？苹果Carplay第三方分屏功能评测...
几天前,苹果公司正式更新了iOS13.4版本.一个小版本系统更新,却让车主群热闹了起来.在这个版本中,苹果正式开放了Carplay分屏显示模式下对第三方地图的支持. 车主们的热情,化为高德地图和百度地 ...
vue 高德地图不同区域显示不同颜色_老司机频繁掉沟里，高德百度腾讯地图导航到底该怎么选？...
导航类app发展至今,基本形成了三分天下的局面:高德.百度.腾讯,然而事实真的是三家平分天下么?三款不同的地图导航软件各有优缺点,至于什么路况选择哪个软件导航似乎更是一门玄学? 很多人想知道高德地图. ...
vue 高德地图不同区域显示不同颜色_高德地图车机版4.0解析：看不见的升级才是重点...
近日,高德正式发布高德地图车机版(AMAP AUTO)4.0. 自2016年初高德地图车机版(AMAP AUTO)首次亮相后,此次正式推出的4.0版本,已经是该智能车载导航产品的第三次大升级. 在车云 ...
vue 高德地图不同区域显示不同颜色_联测科技丨高德地图不仅仅是拿来导航的...
高德地图不仅仅当做一个导航工具,他还有许多不一样的用途. 隐藏功能一:制作高大上的PPT地图高德地图强悍的功能,我们需要进入这个网站:https://lbs.amap.com,也就是高德开放平台. ...
Android高德地图绘制区域,Android高德地图多边形的绘制与编辑
最近项目中用到了一个高德地图画地块的功能,差了一下api,发现只有js有相关的方法,所以仿照js的交互方式做了一个android版的多边形绘制与编辑. 先不说,上一张效果图完成效果图 1.通过观察, ...
高德api覆盖区域由层级控制显示和隐藏
这个是一个区域化的从外面请求的json然后在给到高德先看一下外部的JSON [{"name": "11","areas": [[121. ...
vue 高德地图不同区域显示不同颜色_没想到高德地图还能这么用，简直是PPT图表神器！...
本文转自:公众号"旁门左道PPT" 作者:邵云蛟提到高德地图,相信咱们每一个人都不会陌生,日常用来导航,也可以用来打车,一次呼叫8种车型,非常方便: 但是,如果你把它仅仅当做一个 ...

高德行政区划地图，区域划线，行政区划浏览

效果图

代码

高德行政区划地图，区域划线，行政区划浏览相关推荐

最新文章

热门文章