离线地图优势

高德地图接口，个人每天免费调用次数为500次，渲染速度受网络波动影响，又或许项目部署在局域网，无法访问外网。所以需要使用离线地图。

环境需要

npm install echarts --save

下载地图离线资源包

https://hxkj.vip/demo/echartsMap/
将离线包导入到Vue项目中，资源包格式geoJson，Vue可能出现不识别情况，可将后缀名改成.Json格式。

本项目功能

本项目使用河南地图，省市下钻到县级

具体代码

<template><div id="mapContainer" style="height:100%;width:100%;"></div>
</template><script>import echarts from "echarts";import Vue from 'vue'import henan from './map/410000.Json'import zhengzhou from './map/410000/410100.Json'import kaifeng from './map/410000/410200.Json'import luoyang from './map/410000/410300.Json'import pingdingshan from './map/410000/410400.Json'import anyang from './map/410000/410500.Json'import hebi from './map/410000/410600.Json'import xinxiang from './map/410000/410700.Json'import jiaozuo from './map/410000/410800.Json'import puyang from './map/410000/410900.Json'import xuchang from './map/410000/411000.Json'import luohe from './map/410000/411100.Json'import sanmenxia from './map/410000/411200.Json'import nanyang from './map/410000/411300.Json'import shanqiu from './map/410000/411400.Json'import xinyang from './map/410000/411500.Json'import zhoukou from './map/410000/411600.Json'import zhumadian from './map/410000/411700.Json'import jiyuan from './map/410000/419001.Json'import {getCityCode} from "../../api/LoadingRate";export default {name: "echart-map",data() {return {itemMap : '',jsonMap : {'410000': henan,'410100': zhengzhou,'410200': kaifeng,'410300': luoyang,'410400': pingdingshan,'410500': anyang,'410600': hebi,'410700': xinxiang,'410800': jiaozuo,'410900': puyang,'411000': xuchang,'411100': luohe,'411200': sanmenxia,'411300': nanyang,'411400': shanqiu,'411500': xinyang,'411600': zhoukou,'411700': zhumadian,'419001': jiyuan},cityInfo: new Map()}},mounted() {this.initMapSelect()},methods: {//初始化地图选择async initMapSelect() {this.itemMap = '410000'this.initMapData()},initMapData(){//初始化 cityCode和cityName的映射关系this.jsonMap[this.itemMap].features.forEach(obj =>{Vue.set(this.cityInfo, obj.properties.name,obj.properties.adcode)})this.chinaConfigure()},chinaConfigure() {let myChart = echarts.init(document.getElementById("mapContainer")); //这里是为了获得容器所在位置// window.onresize = myChart.resize;echarts.registerMap(this.itemMap,this.jsonMap[this.itemMap])let option = {tooltip: {}, // 鼠标移到图里面的浮动提示框dataRange: {show: false,min: 0,max: 1000,text: ['High', 'Low'],realtime: true,calculable: true,},geo: { // 这个是重点配置区map:  this.itemMap, // 根据名字显示中国地图，省或市地图，roam: false,label: {normal: {show: true, // 是否显示对应地名textStyle: {color: '#eee'}}},itemStyle: {normal: {areaColor: "rgb(36, 88, 76)",borderColor: '#eee'},emphasis: {areaColor: '#8dd7fc',}},}}myChart.setOption(option,true)window.onresize = myChart.resize;myChart.on('click', this.echartsMapClick);},//点击下钻echartsMapClick(params) {//县市层级不可下钻  济源市特殊判断if (this.cityInfo[params.name]+'' !== '419001' && this.cityInfo[params.name]+'' !== '济源市'){if((!(this.cityInfo[params.name]+'').endsWith("00")) || (params.name+'').endsWith("县") || (params.name+'').endsWith("区")){return ;}}if(this.cityInfo[params.name]  == '济源市' || this.itemMap == '419001'){return;}let routeUrl = this.$router.resolve({path: "你的跳转路径" + this.cityInfo[params.name]});window.open(routeUrl.href, '_blank');}}};
</script>

基于Vue的高德离线地图开发--省市县相关推荐

BIGEMAP谷歌(百度、高德)离线地图开发环境搭建
谷歌(百度.高德)离线地图开发环境搭建发布时间:2018-01-17 版权: 1.说明离线地图开发环境支持谷歌地图.百度地图.高德地图等等所有常用地图类型,支持在局域网内的地图部署.二次开发. 2 ...
高德离线地图开发 java_使用离线地图-创建地图-开发指南-Android 地图SDK | 高德地图API...
高德3D 地图 SDK支持离线地图功能.(2D 地图 SDK 不支持离线地图功能) 离线地图可满足在无网络环境下查看地图信息的需求,在设备本地有离线地图数据的情况下,SDK 会优先加载离线地图. 离线 ...
高德离线地图开发教程
离线地图开发主要有两部分组成:1.获取离线地图数据:因为离线地图一般都是局域网,所以需要离线地图数据放在内网中使用:2.离线地图服务器搭建以及二次开发接口提供,离线地图是一种服务,就像我们Apache ...
Android高德地图基本开发/在线高德离线地图开发/断网使用离线地图（Assets文件夹的使用）
文章目录高德SDK基本使用前置操作需求一:显示地图,并以当前所在位置为中心权限申请布局功能代码活动功能代码效果展示需求二:离线地图(直接添加到应用端项目内) 需求三 :点击数据后以数据 ...
8、高德离线地图开发教程
下载离线地图数据(支持谷歌.百度.高德等所有地图源) 发布时间:2019-03-12 版权:BIGEMAP 离线地图分为两种:一种叫"金字塔瓦片"数据,一种叫"矢量地图数 ...
bigemap高德离线地图开发教程
如何发布ArcGIS Server离线地图(google 瓦片) 发布时间:2018-01-17 版权: 说明本案例实现内容:GoogleEarth瓦片地图的获取.在ArcGIS Server Ma ...
高德离线地图开发 java_自定义地图-创建地图-开发指南-Android 地图SDK | 高德地图API...
简介自 Android 3D 地图 SDK v5.2.0起,高德地图支持使用可视化自定义地图模版改变底图颜色和样式,实现可视化的编辑和控制显示地图元素. 创建样式文件创建地图样式高德地图开放平台 ...
3、如何搭建高德离线地图服务
谷歌(百度.高德)离线地图开发环境搭建发布时间:2018-01-17 版权: 1.说明离线地图开发环境支持谷歌地图.百度地图.高德地图等等所有常用地图类型,支持在局域网内的地图部署.二次开发. 2 ...
8、谷歌离线地图开发教程
谷歌(百度.高德)离线地图开发环境搭建发布时间:2018-01-17 版权: 1.说明离线地图开发环境支持谷歌地图.百度地图.高德地图等等所有常用地图类型,支持在局域网内的地图部署.二次开发. 2 ...

基于Vue的高德离线地图开发--省市县

基于Vue的高德离线地图

离线地图优势

环境需要

下载地图离线资源包

本项目功能

具体代码

基于Vue的高德离线地图开发--省市县相关推荐

最新文章

热门文章