On the combination of ecarts and Baidu map, in the Intranet environment to develop offline map, to achieve point, line, range value.

I have such a bad temper 2021-05-04 15:46:53
combination ecarts baidu map intranet


 Offline map Introduction 3 elements .jpg

introduction

front end er One of the necessary skills : Map development . It's not development , Just take the plug-ins developed by Baidu map bulls , Make a simple use of . Before reading this article , Try the development of online map first , Such as : apply AK code , Learn about Baidu maps api,Echarts Chinese map module .

Results the preview

Last year JS Offline version made in , For compatibility IE, The old version used Echarts: Compatibility required ie You can use this version of Echarts

map_js.gif This is recently done vue edition :

map_vue.gif

Realization way

1. The introduction of the file

My way of doing it is to need 4 things :echarts,apiv1.3.min.js,modules_ditu.js, Tiles .

The key step in map development is : How to introduce Baidu map api file . References in online maps are simple , It only needs script The introduction of a url that will do , Then we can introduce the correlation API The file of .<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= Yours AK code "></script>

So offline map is the same idea , We just need to introduce api dependent JS File can . The steps to bring in a file ( In need of apiv1.3.min For example ). I used to study this blogger's blog

 Map file acquisition .gif

In the offline map , We need to introduce JS The documents are only 2 individual JS, The one in the article CSS You can not quote , No influence .

Finally, our core => The acquisition of Tile Map . Offline maps are based on JS Dynamic splicing path in , To get tiles , The visualization map realized by this method . The only tiles we use are 5 A hierarchy , But the number of pictures is already there 2W More than one ,

 Tiles .gif

2. Path changes in the file

After the introduction of the file , We also need to store the files according to our location , Let's adjust the two JS In the path . With my version api--.js For example :

 Tile file path .jpg

2.jpg

3. The import file appears bug

Text cannot be selected

In this page of importing map related files , The text cannot be selected , Make it impossible for users to copy . This is because modules_ditu.js Caused by the , Because there are modules--.js In the version , Will add onselectstart = fasle Do not select text . so what , I try to use the source code , Change its value , It's the wood effect , Didn't work .

3.jpg The final solution , Baidu is , Look for some old versions modules--.js Just replace the file .

vue Code implementation in

1. Related codes

index.html Introduction in

notes : Scaffolding created in the project , because webpack The default path to package static files in static in , So our static files should also be placed in static Next .

<script type="text/javascript" src="./static/map/js/apiv1.3.min.js"></script>
modules_ditu There's no need to introduce , Because it's time to JS Is in api---.js There is an introduction to , There is no need to introduce it repeatedly .
 Copy code 
<template>
<div class="ip_query query clearfix">
<div id="map"></div>
</div>
</template>
<script>
export default {
data() {
return {
geo_data: {
city: null,
coord: null,
radius: null
}
};
},
created() {
let this_ = this;
let ipLocation = {
city: null,
coord: null,
radius: 600
};
// assignment 
this.geo_data = {
city: ipLocation.city ? ipLocation.city : " Beijing ",
coord: [
ipLocation.lngwgs ? ipLocation.lngwgs : 116.397469,
ipLocation.latwgs ? ipLocation.latwgs : 39.908821
],
radius: ipLocation.radius
};
// Make a map 
this.$nextTick(() => {
let IpMap_ec = this.echarts.init(document.getElementById("map"));
let map_render = function(params, api) {
let x_y = api.coord(this_.geo_data.coord);
let r = api.size([0, 1])[1] * (this_.geo_data.radius / 80);
let color = "#A7C2DF";
return {
type: "circle",
shape: {
cx: x_y[0],
cy: x_y[1],
r: r
},
style: api.style({
fill: color,
stroke: this_.echarts.color.lift(color)
})
};
};
IpMap_ec.setOption(
{
bmap: {
center: this.geo_data.coord,
zoom: 5,
roam: "scale"
},
series: [
{
type: "scatter",
coordinateSystem: "bmap",
symbol: "circle",
symbolSize: 30,
data: [
{
name: this.geo_data.city,
value: this.geo_data.coord
}
]
},
{
type: "custom",
coordinateSystem: "bmap",
renderItem: map_render,
itemStyle: {
opacity: 0.5
},
animation: false,
silent: true,
data: [0],
z: -10
}
]
},
true
);
// map API Event correlation 
let bmap = IpMap_ec.getModel()
.getComponent("bmap")
.getBMap();
bmap.setMinZoom(3);
bmap.setMaxZoom(7);
// Solve rolling trigger 2 Time zoomstart Situation of time 
let zoom_arr = [];
bmap.addEventListener("zoomstart", function() {
let zoom_level = bmap.getZoom();
zoom_arr.push(zoom_level);
});
let zoom_map = function() {
let point = new BMap.Point(
this_.geo_data.coord[0],
this_.geo_data.coord[1]
);
if (zoom_arr.length > 1) {
let end_level = bmap.getZoom();
let differ = end_level - zoom_arr[0];
let res_level = differ > 0 ? zoom_arr[0] + differ - 1 : zoom_arr[0] + differ + 1;
zoom_arr = [];
bmap.centerAndZoom(point, res_level);
} else {
bmap.centerAndZoom(point, bmap.getZoom());
zoom_arr = [];
}
};
// Shrink and expand the fixed center point 
bmap.addEventListener("zoomend", zoom_map);
});
}
};
</script>
<style lang="stylus" scoped>
.ip_query {
#map {
width: 900px;
height: 600px;
position: relative;
margin: 30px auto;
}
}
</style>
 Copy code 

Realization effect :

 Map _test.gif

2. relevant bug Or optimization point

1. If 2 Instantiate one or more times echarts, The pulley rolls once , Shrinking and expanding 2 A level

Because the map I made is mainly used to IP Querying , Query failure may occur , At the time of inquiry input Box and query content of the dynamic transition effect , And then I'm here for a simple and crude example echarts To achieve the effect . There's a problem , It's multiple searches IP, When you zoom in and out of the map The pulley rolls once , Shrinking and expanding 2 A level , And then made a judgment , Let's get him back to zoom manually. Normally .

 // Solve rolling trigger 2 Time zoomstart Situation of time
let zoom_arr = [];
bmap.addEventListener("zoomstart", function() {
let zoom_level = bmap.getZoom();
zoom_arr.push(zoom_level);
});
let zoom_map = function() {
let point = new BMap.Point(
this_.geo_data.coord[0],
this_.geo_data.coord[1]
);
if (zoom_arr.length > 1) {
let end_level = bmap.getZoom();
let differ = end_level - zoom_arr[0];
let res_level;
if (differ > 0) {
res_level = zoom_arr[0] + differ - 1;
} else {
res_level = zoom_arr[0] + differ + 1;
}
zoom_arr = [];
bmap.centerAndZoom(point, res_level);
} else {
bmap.centerAndZoom(point, bmap.getZoom());
zoom_arr = [];
}
};
// Shrink and expand the fixed center point
bmap.addEventListener("zoomend", zoom_map);
 Copy code 

2. Optimization when dragging out the boundary

A map is essentially a mosaic of tiles , But offline maps are limited by the perfection of tile maps , After dragging out of the border , We actually have no pictures to quote . therefore , There will be grey edges ( Our background color ), The experience is not good .

The best effect is : When the user drags to the boundary , Disable drag and drop . When you pull back , Then enable drag and drop . perhaps It's a spherical effect , When you drag to the left boundary , The right boundary appears , But it's more difficult . What I'm doing here is similar to the first effect , It's not perfect either .

When I was doing it last year , The idea is that at the beginning of each drag (dragstart) First, judge whether it is at the boundary , Continue to disable drag and drop at the boundary ,dragging When sliding to the boundary , Disable drag and drop directly map.disableDragging();, then dragend And then enable drag and drop . however , In practice, when dragging is disabled , such as dragging Drag and drop is disabled in , He won't go dragend 了 , Directly in dragging This state stops , Then other callbacks are similar to this , I didn't find a perfect callback to trigger this process , So it didn't come true .

Because offline maps have less information , Baidu map API It's not perfect , There is no relevant callback , I don't have the ability to package it myself , So we use the following . The idea here is :

Because we only have 4 Two zoom levels , And then through the baidu map related API The longitude and latitude of the central point corresponding to the critical value measured manually , When you drag out the boundary , Drag him back to the center of the current critical value . so what , The problem here is : When you drag out of the border , And then drag back to the center of the boundary , In fact, there is a process , There will be a certain amount of time to complete the process . And then this situation , Will trigger multiple drags back to the current center point , The user experience is shown in the figure below : When you drag out the left border , It will slide a certain distance . It will only return to the center of the current left boundary x It's about ,y It's going to slide a little bit . About the solution of this problem , After I learned anti shake and throttling later , It can be used The idea of saving money To perfect .

map_js_bb.gif

 let x = 0;
let y = 0;
map.addEventListener('dragging', function () {
console.log(map.getBounds().getCenter());
// The visual area after moving
var movew = map.getBounds().getSouthWest(); // The lower left corner of the viewing area
var movee = map.getBounds().getNorthEast(); // The upper right corner of the viewing area
var moveL = movew.lng;// The longitude of the left boundary of the visible area
var moveR = movee.lng;// Longitude of the right boundary of the visible area
var moveB = movew.lat;// The latitude of the lower boundary of the visible area
var moveT = movee.lat;// The latitude of the upper boundary of the visible area
var boundaryleftlng;// Left boundary critical longitude
var boundaryrightlng;// Right boundary critical longitude
var boundarytoplat;// The upper boundary critical latitude
var boundarydownlat;// The critical value of the lower boundary is latitude
if (zoom == 4) {
boundaryleftlng = -179.204242;
boundarydownlat = -82.202266;
boundaryrightlng = 180.910992
boundarytoplat = 84.602547;
if (moveR > boundaryrightlng) {
x = 60;
} else if (moveL < boundaryleftlng) {
x = -58;
} else {
x = map.getBounds().getCenter().lng;
}
if (moveT > boundarytoplat) {
y = 65;
} else if (moveB < boundarydownlat) {
y = -55;
} else {
y = map.getBounds().getCenter().lat;
}
} else if (zoom == 5) {
boundaryleftlng = -179.940134;
boundarydownlat = -81.533889;
boundaryrightlng = 179.690224;
boundarytoplat = 84.602547;
if (moveR > boundaryrightlng) {
x = 120;
} else if (moveL < boundaryleftlng) {
x = -120;
} else {
x = map.getBounds().getCenter().lng;
}
if (moveT > boundarytoplat) {
y = 79;
} else if (moveB < boundarydownlat) {
y = -55;
} else {
y = map.getBounds().getCenter().lat;
}
} else if (zoom == 6) {
boundaryleftlng = -179.976929;
boundarydownlat = -81.133421;
boundaryrightlng = 179.984581;
boundarytoplat = 84.581712;
if (moveR > boundaryrightlng) {
x = 150;
} else if (moveL < boundaryleftlng) {
x = -150;
} else {
x = map.getBounds().getCenter().lng;
}
if (moveT > boundarytoplat) {
y = 82;
} else if (moveB < boundarydownlat) {
y = -73;
} else {
y = map.getBounds().getCenter().lat;
}
} else if (zoom == 7) {
boundaryleftlng = -179.811353;
boundarydownlat = -80.952417;
boundaryrightlng = 179.910992;
boundarytoplat = 84.607743;
if (moveR > boundaryrightlng) {
x = 164;
} else if (moveL < boundaryleftlng) {
x = -164;
} else {
x = map.getBounds().getCenter().lng;
}
if (moveT > boundarytoplat) {
y = 83;
} else if (moveB < boundarydownlat) {
y = -78;
} else {
y = map.getBounds().getCenter().lat;
}
}
if(moveR > boundaryrightlng || moveL < boundaryleftlng || moveT > boundarytoplat || moveB < boundarydownlat){
// map.disableDragging();
var point = new BMap.Point(x,y);
map.centerAndZoom(point, map.getZoom());
}
});
 Copy code 

3.mousemove The drag and drop experience is not good due to the time-consuming events ( Unresolved )

vue I've banned drag and drop in the version of the code , Because I used two JS The file and the JS The version is the same , But with the latest version of echarts Add vue After introduction , This warning will be issued when dragging , It will be very Caton , It's just that we don't have to drag our needs , I banned it . If you need to drag and drop, you can try to find more versions api--.js and module--.js Try to solve it .

warn.jpg

Epilogue

Thank you for seeing , If you think there's something to gain , Please use your rich hand , Give Xiaobian a compliment ~ !

Because it's the May Day holiday , The tile file is too big , I didn't copy it , After that, I will send the related documents of my map , Upload to Baidu cloud , There will be a link later , You can download it if you are interested , Give it a try .

版权声明
本文为[I have such a bad temper]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/05/20210504154431381k.html

  1. Two way linked list: I'm no longer one-way driving
  2. Vue event and form processing
  3. Reactive TraderCloud实时外汇开源交易平台
  4. Reactive tradercloud real time foreign exchange open source trading platform
  5. Node.js REST API的10个最佳实践
  6. Ten best practices of node.js rest API
  7. Fiddler advanced usage
  8. Process from Vue template to render
  9. Promise up (asynchronous or synchronous)
  10. Principle and implementation of promise
  11. Vs code plug in sharing - run code
  12. Vue practical notes (1) introduction of Ant Design
  13. Vue actual combat notes (2) introduction of element plus
  14. Introduction to webpack
  15. Webpack construction process
  16. Vue notes
  17. The experience and lessons of moving from ruby megalith architecture to go microservice
  18. Using leancloud to add artitalk module to hexo blog
  19. Implementation of chrome request filtering extension
  20. Detailed introduction of beer import declaration elements and label quarantine [import knowledge]
  21. Gallop workflow engine design series 01 process element design
  22. VUE移动端音乐APP学习【十六】:播放器歌词显示开发
  23. Vue Mobile Music App learning [16]: player lyrics display development
  24. jquery cookie
  25. jquery cookie
  26. 体面编码之JavaScript
  27. JavaScript for decent coding
  28. React17 系统精讲 结合TS打造旅游电商平台
  29. React17 system combined with TS to build tourism e-commerce platform
  30. 2021-05-04 hot news
  31. HttpSession对象与Cooike的关系 以及 Cookie对象构造函数问题
  32. gRPC-Web:替代REST的gRPC的Javascript库包
  33. The relationship between httpsession object and cooike and the construction of cookie object
  34. Grpc Web: a JavaScript library package to replace rest grpc
  35. Building reactive rest API with Java - kalpa Senanayake
  36. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  37. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  38. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  39. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  40. Vue.js比jQuery更容易学习
  41. Node.js的Reactor模式 与异步编程
  42. Vue. JS is easier to learn than jQuery
  43. Reactor mode of node.js and asynchronous programming
  44. 详解JavaScript中的正则表达式
  45. Explain regular expressions in JavaScript
  46. 详解JavaScript中的正则表达式
  47. Explain regular expressions in JavaScript
  48. JS: closure
  49. Write your own promise in promises / A + specification
  50. Analysis of the core mechanism of webpack from loader, plugin to egg
  51. On the import and export of webpack
  52. Interpretation of lodash source code (2)
  53. Hexo series (5) writing articles
  54. 有人用过JMeter或用HttpUnit写过测试吗????
  55. Has anyone ever used JMeter or written tests in httpUnit????
  56. JavaScript异步编程4——Promise错误处理
  57. Leetcode 1846. Reduce and rearrange the largest element of an array
  58. JavaScript asynchronous programming 4 -- promise error handling
  59. SQLite是一种经典的无服务器Serverless
  60. 通过Spring Boot Webflux实现Reactor Kafka