2019百度地图离线地图制作

根据项目内网需求需要制作一个离线地图，因为外网访问不了在线地图api，因此这里使用了百度的离线地图，当时网上也找过，资源很少，需要改源文件，但很多是16年的帖子了，一改就错，因为百度更新了。。。

所以我知道这类资源是很少的，肯定会有很多人有这类需求但是不知道怎么做。

为了方便大家，因此这里分享一个demo，19年做的，成品已经交货了，这里就不贴出来了，剩个demo相当于最初的架子，也许你们更好搭一点

需要引入这些文件，如下图

其中bmap-offline是必需的配置文件,里面有个tiles是地图切片
index.html

<script type="text/javascript" src="./static/map_load.js"></script>
<script type="text/javascript" src="./static/AreaRestriction_min.js"></script>

组件:

import BMap from "BMap";

getMapCanvas() {var data = [{name: "小马",region_id: 1,online: 1,lng:"116.521264",lat: "40.567227",value: [116.521264, 40.567227],site_url: "xxxxxxxxx",car: 26},{name: "小马2",region_id: 2,online: 1,lng:"116.521264",lat: "40.567227",value: [116.521264, 40.567227],site_url: "xxxxxxxxx",car: 26},{name: "小马3",region_id: 3,online: 1,lng:"116.521264",lat: "40.567227",value: [116.521264, 40.567227],site_url: "xxxxxxxxx",car: 26}];let myChart = this.$echarts.init(document.getElementById("myChart"));//初始化var arr = [];var geoCoordMap = {};var seriesArr = [];let colors = ["#38a3db", "#f13e3e", "#e28645"];//可以定义多个colorfor (let i = 0; i < data.length; i++) {//自定义对象var arr_obj = {name: data[i].name,region_id: data[i].region_id,online: data[i].online,value: [{name: "车辆",value: data[i].car}]};arr.push(arr_obj);geoCoordMap[data[i].name] = data[i].value;}var convertData = function(arr) {//动态配置数据,对应信息的位置坐标var res = [];for (var i = 0; i < arr.length; i++) {var geoCoord = geoCoordMap[arr[i].name];if (geoCoord) {res.push({name: arr[i].name,region_id: arr[i].region_id,online: data[i].online,site_url: data[i].site_url,value: geoCoord.concat(arr[i].value)});}}return res;};for (let i = 1; i < 12; i++) {//symbolSize为圆点大小,这里根据value的大小动态规定圆点大小var con = convertData(arr)var seriesObj = {symbolSize: function(val) {if (val[2]) {if (val[2].value <= 500) {return 10;} else if (val[2].value > 500 && val[6].value <= 1000) {return 12;} else {return 14;}}},type: "scatter",coordinateSystem: "bmap",//定义bmapgeoIndex: 0,label: {color: "#fff",show: false},data: con};seriesObj.name = i;seriesArr.push(seriesObj);//配置series对象}myChart.setOption({title: {text: "站点实时情况",left: "6%",top: "5%",textStyle: {color: "#666",fontSize: 18}},tooltip: {trigger: "item",formatter: function(params) {return ('<p class="el-icon-office-building" style="color:rgb(209, 209, 209);font-size:16px;font-weight:600;margin-bottom:10px;text-align:center;">' +"&nbsp;&nbsp;" +123 +"</p>");}},bmap: {center: [this.lng, this.lat],//设置地图中心,处于canvas的中心点zoom: this.zoom,//缩放roam: true,//拉伸scaleLimit: { //缩放级别max: 10,min: 9}},color: colors,//颜色series: seriesArr//配置数据});var map = myChart.getModel().getComponent("bmap").getBMap();//初始化// map.centerAndZoom(new BMap.Point(116.521264, 40.567227), 9);//设置中心点// map.setCurrentCity("北京");//设置中心点名称map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放// map.disableDragging();//是否禁止拖拽map.setMinZoom(9);//最小缩放级别map.setMaxZoom(13);//最大缩放级别map.addEventListener("zoomend", () => {//监听缩放this.zoom = map.getZoom();});map.addEventListener("mousemove", e => {//监听位移this.lng = e.point.lng;this.lat = e.point.lat;});var b = new BMap.Bounds(//设置地图范围(西北.东南)new BMap.Point(114.697919, 39.426638),new BMap.Point(118.413095, 41.444382));try {//拖出范围后的报出异常BMapLib.AreaRestriction.setBounds(map, b);} catch (e) {this.$message({message: e,type: "error"});}// map.setMaxZoom({ zoom: 12 });// map.setMapStyleV2({//设置自定义样式,这里离线所以没有此api//   styleId: '6ee8ff46f537exxxxxxxxxxxxxxxxx'// });window.addEventListener("resize", function() {//监听重置canvas窗口myChart.resize();});var _this = this;myChart.on("click", function(params) {//当时做了一个点击站点跳转到对应的urlif (params.data) {window.location.href = params.data.site_url;}});}

保存,刷新页面,f12看到打印

成功加载

ok!
所需文件我都发在博客里了

2019百度地图离线地图制作相关推荐

谷歌地图离线地图瓦片下载_如何下载Google地图以供离线使用
谷歌地图离线地图瓦片下载 If you've ever wanted to be able to download Google Maps data for offline use, you shou ...
百度地图 -- 离线地图开发
本文部分内容是在其它网友的文章及例程上进行了总结及改进,在此表示感谢! 1. 下载百度地图Demo工程文件. Demo工程文件百度网盘下载: baidumapv2.0_js_offline_V1_V ...
百度高德离线地图二次开发入门步骤
1.搭建离线地图开发环境 2.下载离线地图数据(金字塔瓦片数据) 3.离线地图二次开发接口(离线地图API) ...
高德地图离线地图开发教程
离线地图开发主要有两部分组成:1.获取离线地图数据:因为离线地图一般都是局域网,所以需要离线地图数据放在内网中使用:2.离线地图服务器搭建以及二次开发接口提供,离线地图是一种服务,就像我们Apache ...
轻松实现离线地图-离线地图-地图瓦片下载
此demo为前端页面离线地图,不连外网,不用与后端交互,瓦片下载的全就显示的全: 代码示例下载: 链接:https://pan.baidu.com/s/1We86NFDNBCoD9JPz3z_iyw ...
如何搭建卫星地图离线地图服务?
bigemap 搭建离线地图服务主要是两个步骤:一是:下载离线地图服务需要的地图数据:二是:将下载的离线地图数据发布成地图服务:只有做好这两步,才能有接下来的二次开发和行业应用. 前面已经介绍了安装 ...
5、如何搭建卫星地图离线地图服务
如何发布WMS/WMTS离线地图服务发布时间:2019-03-28 版权: 相关软件下载: 离线地图开发包:BMSERVER 介绍: WMTS(OpenGIS® Web Map Tile Servi ...
php加载离线地图,离线地图解决方案一
离线地图使用私有OSM Server作为Tile服务器, 前端使用Openlayer渲染地图数据. 共实践了两种安装环境(准确来说是三种, 但是放弃了在Redhat 6.5的部署...). #Ubun ...
如何搭建卫星地图离线地图服务
搭建离线地图服务主要是两个步骤:一是:下载离线地图服务需要的地图数据:二是:将下载的离线地图数据发布成地图服务:只有做好这两步,才能有接下来的二次开发和行业应用. 下载安装离线地图服务器:省略 (备 ...

2019百度地图离线地图制作

2019百度地图离线地图制作相关推荐

最新文章

热门文章