Autonavi open platform GeoHUB, which is very interesting.

In the past, you didn’t know where to find GeoJSON data for mapping, linking, and making regional maps for specific cities. Now it’s super convenient. Combined with autonavi API, very good to use. Here is a simple use of the GeoHUB using the Loca.ScatterLayer.

knowledge

  • 1. This paper deals with the encapsulation and use of Vue for AmAP 2.0. Here, the production process of Autonavi Loca 2.0 breathing points (also called scattering points, sticking points and water wave points) is used to demonstrate
  • 2,GeoHUBThe generatedgeojosnData file usage involvesThe VUE local mock server requests mock data
  • 3,viewMode: '3D'The map should be initialized in 3D mode, otherwise the layer will lose height information
  • 4. Loca 2.0 API

implementation

components — map — locaPoint.vue

The loading codes of breathing points are mainly as follows. For the specific process of making GEO map data, please refer to the relevant introduction of GeoHUB making geo map data in the next section

initBreathPoint() { this.breathPoint = new Loca.ScatterLayer({ loca: this.loca, zIndex: 113, opacity: 1, visible: True, zooms: [2, 22]}) / / geo map data to be loaded here enclosing breathPoint. SetSource (enclosing geoLevelF) enclosing breathPoint. SetStyle ({unit: 'meter', size: [520, 520], borderWidth: 520, borderColor: 'rgba(250,250,250,1)', duration: 500, animate: true, texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_yellow.png', color: 'rgba (200200200, 1)})}Copy the code

GeoHUBMake geo map data

  • 1, select the Draw point function, and then you can mark the map. The specific location can be located in the search bar. A few random locations have been chosen here.

  • 2. If you have custom requirements for data, you can add custom property fields. Such as type, color, grouping……

  • 3. Click Save to return the list of data sets. Click Download to get onehuadu.geojsonThe file.

  • 4,huadu.geojsonThe content of the file is as follows, standardgeoMap data format
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [113.220125, 23.404326]}}, {"type": "Feature", "properties": {}, "geometry": {"type": Coordinates "Point", "coordinates": [113.203846, 23.377273]}}, {"type": "Feature", "properties": {}, "geometry": {"type": "Point", "coordinates": [113.254308, 23.416872]}}, {"type": "Feature", "properties": {}, "geometry": {"type": "Point", "coordinates": [113.232409, 23.426934]}}, {"type": "Feature", "properties": {}, "geometry": {"type": "Point", "coordinates": [113.161159, 23.400596]}}, {"type": "Feature", "properties": {}, "geometry": {"type": { "Point", "coordinates": [113.166207, 23.385075]}}, {"type": "Feature", "properties": {}, "geometry": {"type": "Point", "coordinates": [113.307605, 23.389929]}}, {"type": "Feature", "properties": {}, "geometry": {"type": "Point", "coordinates": [113.235221, 23.496927]}}, {"type": "Feature", "properties": {}, "geometry": {"type": "Point", "coordinates": [113.155997, 23.483681]}}]}Copy the code
  • 5, load,geojsonThe data. referenceThe VUE local mock server requests mock data
this.geoLevelF = new Loca.GeoJSONSource({
  url: publicPath + `/data/huadu.geojson`
})
Copy the code
  • 6. Set breathing point data and load it to the map for display
this.breathPoint.setSource(this.geoLevelF)
Copy the code
  • 7, effects,

Code overview

The files involved are as follows (specific reference code) :

|-- public |-- data |-- huadu.geojson |-- src |-- components |-- map |-- locaPoint.vue |-- views |-- amapLocaTest // Instances where | -- index. Vue | -- index. SCSS | -- index. JsCopy the code

code

Just look for the code in the code Overview directory.

conclusion

This is a simple use of the GeoHub’s draw point functionality. There are drawing lines, drawing surface, custom attributes, upload data, release data services and other functions interested in their own exploration.

Code inside the Vue demonstrates amap Loca 2.0 data visualization. In addition to breathing points, there are pulse lines, connecting lines, depending on the specific code.