Leafletjs Visualization of geographic location (update map synchronization)

an open-source JavaScript libraryfor mobile-friendly interactive maps

An open source JavaScript library for mobile friendly interactive maps official website: leafletjs.com/reference-1…

• Is a lightweight map service support
• More suitable for custom development,
• Open source has made many plug-ins easier to use

Zero · Self-statement before practice

Practice the paper

Use LeafletJS to build layers on Autonavi’s map, including dotting, thermal map rendering, AOI boundary processing, map comparison and correlation, etc

Dependencies and support for practices

• For interactive maps leafletjs: leafletjs.com/reference-1…
• Partial Autonavi geographic data LBS: lbs.amap.com/api/webserv…
• Location calculation: turfjs.org/docs

Related knowledge

• Glossary Explanation

• Figure logic

Create a map

• Create a div and add an ID

• Create map instance based on ID

• Autonavi map tiles are used here, created by L. Telayer

• Use addTo(god.lmap) to addTo the created map instance

2 · Create a point and place it on the map

Just create one point

"Arker ([50.5, 30.5]). AddTo (map);Copy the code

Mass data points

• You can create an object using aggregate points
• Adds the point under the current type to the object at the aggregate point

Results show

• Can reduce the loading time of the first screen point, page display a large number of points will cause page lag
• You can understand the aggregation information of each point more clearly. Click to view it in detail

The data was hijacked

• Add Data hijacking

• Control of corresponding points

C. Create a heat to add to the map

Append the address of thermal tile directly to the map via L. Telayer

Iv. Add WKT

• Need to install the WKT format conversion dependency and import WKT from ‘terraformer-wkt-parser’;

  // WKT MULTIPOLYGON ((121.40865097026608 31.236604810063966, 121.41074408027509 31.236532890380659, 121.41082780985562 31.238331389681946, 121.41292095044162 31.2382594304284, 121.41501409012824 31.238187439698606, 121.41509789974839 31.239985920114179, 121.41300471959221 31.24005791983717, 121.41091154033541 31.240129879990036, 121.40881835028665 31.240201809565917, 121.40873465038385 31.23840331026463, 121.40664149001282 31.238475200270329, 121.40655785036461 31.236676700069722, 121.40647420981702 31.234878189976541, 121.40639058006127 31.23307967988336, 121.40848361992323 31.233007799770178, 121.40856729014843 31.234806309863359, 121.40865097026608 31.236604810063966))

• Parse (WKT) to convert the latitude and longitude after formatting (LeafletJS is different from other maps, the latitude and longitude parameters are opposite)

• useL.geoJsonAppend to the layer object and append to the map

Wu · Multiple map synchronization

Use the leaflet.sync plug-in

Github.com/jieter/Leaf…

mapA.sync(mapB);
Copy the code

Anaesthetist: false to prevent page-escape listening using this property

Land – point correlation

Results show

• Select the point, input the radius 500, there is no other point in the circle, point correlation degree is 0
• The input radius is 3500, there are two points in the circle (not counting the current point), and the degree of correlation is 2

Point – position association preparation

• Mark multiple points
• Select a point to set the radius
• The point information for the change point range is calculated based on geographical location Turf

Plot and calculate

• Draw the points according to the way in title two

• A circle

• Draw circle l.circle (latLng, {radius: radius}) based on input radius and click point coordinates

• Round call getWithInCirCleInfoByMarking correlation method

• Correlation method getWithInCirCleInfoByMarking

• Here is the data completion, you can first extract the calculation method of the correlation degree getWithInCirCleInfo

• After the circle is drawn, the boundary range of the circle can be obtained according to Turf. circle

• Using Turf is to pay special attention to data instances, the boundary of the circle needs to be processed with data turf.polygon, detailed in the official documentation: turfjs.org/docs/#point…

• If the point is in the circle, the features. Length returned by Turf. pointsWithinPolygon tells whether the point is in the circle

Vii. Drawing of administrative boundaries

Results show

draw

• Obtain administrative boundary information according to Autonavi API lbs.amap.com/api/webserv…

• Extract and draw administrative boundary method

• GOD is the global variable of window

• If you need to display multiple administrative boundary at the same time to get rid of GOD. The districtByCityFeatureLayer. ClearLayers ()

• There are many closed graphs in administrative boundary, which need to be intercepted and traversed into multiple arrays

• Calling this method

  DrawMapDistrictByCity (‘ Shanghai ‘)

Eight · Leaflet common plug-in

Locate the current position