This is the 20th day of my participation in the August Text Challenge.More challenges in August

Introduction to the

This article explains a feature that often appears in development, mapping provinces and cities. Mainly use the Vector layer to draw the multi-lateral lines of provinces and cities. Add this layer to the map layer to realize the drawing of provinces and cities.

Vector

  • The vector layer: Vector data rendered on the client. Constructing a vector layer requires a data source (source) and a style (style), the data source is the element that makes up the vector layer, and the style specifies how the element should be displayed and how it should look. A vector layer contains one or more elements (feature), each element is determined by geographical genus (geometry) and other attributes.
  • Often used to request data from a database, accept data, and parse the received data into information on a layer. If you hover the mouse over China, the corresponding area will be highlighted in red. Highlighting is the behavior of the vector layer.

Map provinces and cities

Initialize the map

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
  </head>
  <style type="text/css">
    .map {
      height: 500px;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css" />
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/build/ol.js"></script>
  <body>
    <div id="map" class="map"></div>
  </body>
  <script>
    var map = new ol.Map({
      target: 'map'
    })

    / / layer
    var layerTile = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'})})/ / view
    var view = new ol.View({
      center: ol.proj.fromLonLat([130.41.28.82]),
      zoom: 4
    })

    map.setView(view)
    map.addLayer(layerTile)
  </script>
</html>
Copy the code

Assemble data source

  • On the Internet to obtain the provincial boundary data, map data selector.

  • After obtaining the data, the first step is to assemble the data. The data downloaded directly is in object format. Since we need to draw more than one province at a time, we’ll create an array to add each data to it.
varGeo = [{... Shanghai. Json},{... Chongqing. Json}]Copy the code

Draw the layer

    // Set the layer
    var areaLayer = new ol.layer.Vector({
      source: new ol.source.Vector({
        features: []})})// Add layers
    map.addLayer(areaLayer)

    let areaFeature = []
    geo.forEach((g) = > {
      var areaFeatureTem = null
      let lineData = g.features[0]
      if (lineData.geometry.type == 'MultiPolygon') {
        areaFeatureTem = new ol.Feature({
          geometry: new ol.geom.MultiPolygon(lineData.geometry.coordinates).transform('EPSG:4326'.'EPSG:3857')})}else if (lineData.geometry.type == 'Polygon') {
        areaFeatureTem = new ol.Feature({
          geometry: new ol.geom.Polygon(lineData.geometry.coordinates).transform('EPSG:4326'.'EPSG:3857')
        })
      }
      areaFeatureTem.setStyle(
        new ol.style.Style({
          fill: new ol.style.Fill({ color: '#4e98f444' }),
          stroke: new ol.style.Stroke({
            width: 3.color: [71.137.227.1]
          })
        })
      )
      areaFeature.push(areaFeatureTem)
    })

    // Add the assembled data
    areaLayer.getSource().addFeatures([...areaFeature])
Copy the code
  • Create layers first, then elements. There are two main types of multilateral elements:MultiPolygon,Polygon, both refer to multilateral lines. The difference isMultiPolygonThe data format is a 4-dimensional array,PolygonIt’s a three dimensional array. Finally, place the created elements on the layer.

conclusion

Vector layer is used to draw the graph through many coordinate points. In addition to drawing provinces and cities, it can also be used to draw sectors, circles, etc. It can be used in conjunction with interactive events to achieve custom drawing, highlighting provinces and cities, etc.