当前位置: 首页 > news >正文

不使用AMap.DistrictSearch,通过poi数据绘制省市县区块

个人申请高德地图key时无法使用AMap.DistrictSearch,可以通过poi数据绘制省市县区块

1.进入POI数据网站找到需要的省市县,下载对应的GeoJson文件 ,此处为poi数据网站链接

2.​

处理geoJson数据,可以直接新建json文件,将下载的geojson内容复制进入也可以使用。也可以在项目内webpack配置文件中修改,同时确保安装了json-loader。我一般都用前者就足够了

npm install json-loader --save-dev

module: {rules: [{test: /\.geojson$/,loader: 'json-loader'}]
}

.3.将文件放入项目内,从组件中引入json文件

import areaList from "../../map/beijing.json";

4.获取点位坐标

//绘制地图区域mapArea(){let _this = thislet polygon;var points=[];areaList.features.forEach(i=>{points=[[]];i.geometry.coordinates[0][0].forEach(item=>{points[0].push(new AMap.LngLat(item[0],item[1]));// points.push([item[0],item[1]]);})})return points},

5.生成地图

initMap(){let _this = this;let mask = this.mapArea()_this.map = new AMap.Map('mapBox', {mask: mask,center: [110.051784, 34.74073],expandZoomRange: true,disableSocket: true,viewMode: '3D',showLabel: true,labelzIndex: 130,zoom: 10.2,layers: [new AMap.TileLayer.RoadNet({}),new AMap.TileLayer.Satellite()]});var maskerIn = new AMap.Marker({position: [116.501415, 39.926055],map: _this.map})var maskerOut = new AMap.Marker({//区域外的不会显示position: [117.001415, 39.926055],map: _this.map})var height = -5000;var color = '#0088ffcc';//rgba// 添加描边new AMap.Polyline({path: mask[0],strokeColor: '#99ffff',strokeWeight: 6,map: _this.map})},

相关文章:

  • 巴西市场有哪些电商平台?巴西最畅销的产品有哪些?
  • 揭秘,PyArmor库让你的Python代码更安全
  • Linux 程序打包
  • 时尚品牌GOODBAI好人好事系列纪录片——Jupiter乐队的热血与梦想
  • ubuntu 18 虚拟机安装(3)安装mysql
  • Hadoop3:参数调优-核心参数NameNode内存配置、并发数配置、回收站配置
  • JAVA学习-练习试用Java实现“天际线问题”
  • Linux Ubuntu 20.04.06 安装Onboard虚拟键盘教程
  • gitignore
  • JAVA学习笔记-JAVA基础语法-DAY20-字节流、字符流
  • 语音模块——LSYT201B模组(超详细)
  • 实用的网站
  • 昇思25天学习打卡营第9天|MindSpore-Vision Transformer图像分类
  • Qt——升级系列(Level Seven):事件、文件
  • MySQL之应用层优化(三)
  • JS 中的深拷贝与浅拷贝
  • canvas 绘制双线技巧
  • JavaScript 无符号位移运算符 三个大于号 的使用方法
  • JavaScript新鲜事·第5期
  • java多线程
  • jquery ajax学习笔记
  • Koa2 之文件上传下载
  • mongo索引构建
  • MySQL数据库运维之数据恢复
  • Promise面试题,控制异步流程
  • 初识 beanstalkd
  • 对话 CTO〡听神策数据 CTO 曹犟描绘数据分析行业的无限可能
  • 翻译:Hystrix - How To Use
  • 浮动相关
  • 基于MaxCompute打造轻盈的人人车移动端数据平台
  • 前端工程化(Gulp、Webpack)-webpack
  • 区块链分支循环
  • 手写一个CommonJS打包工具(一)
  • 一个完整Java Web项目背后的密码
  • 智能合约Solidity教程-事件和日志(一)
  • 自制字幕遮挡器
  • elasticsearch-head插件安装
  • linux 淘宝开源监控工具tsar
  • ​ubuntu下安装kvm虚拟机
  • # 详解 JS 中的事件循环、宏/微任务、Primise对象、定时器函数,以及其在工作中的应用和注意事项
  • #{}和${}的区别?
  • #我与虚拟机的故事#连载20:周志明虚拟机第 3 版:到底值不值得买?
  • (4)(4.6) Triducer
  • (SpringBoot)第二章:Spring创建和使用
  • (附源码)springboot金融新闻信息服务系统 毕业设计651450
  • (附源码)计算机毕业设计ssm电影分享网站
  • (免费领源码)python#django#mysql校园校园宿舍管理系统84831-计算机毕业设计项目选题推荐
  • (三) prometheus + grafana + alertmanager 配置Redis监控
  • (转)ABI是什么
  • (转)原始图像数据和PDF中的图像数据
  • ./configure,make,make install的作用
  • .MyFile@waifu.club.wis.mkp勒索病毒数据怎么处理|数据解密恢复
  • .NET 8 编写 LiteDB vs SQLite 数据库 CRUD 接口性能测试(准备篇)
  • .Net IOC框架入门之一 Unity
  • .NET/C# 判断某个类是否是泛型类型或泛型接口的子类型