增加mapbox插接件和功能

YANGDL

2021-01-16 b4586cdc2a23443a1bdafd2ec19fb3514e541905

 src/views/mapbox/MapBoxHome.vue

@@ -97,7 +97,7 @@
        tiles: [
          // 获取GeoServer 矢量切片服务,可以是一下几种方式
          'http://localhost:8080/vector/tile/{z}/{x}/{y}' // postgis 数据库
          // "http://xearth.cn:6213/geoserver/gwc/service/tms/1.0.0/vectory_tile%3Acontrolpoint@EPSG%3A4326@pbf/{z}/{x}/{y}.pbf" //geoserver
          // 'http://xearth.cn:6213/geoserver/gwc/service/tms/1.0.0/vectory_tile%3Acontrolpoint@EPSG%3A4326@pbf/{z}/{x}/{y}.pbf' // geoserver
        ]
      }
      var geojson = {
@@ -133,6 +133,7 @@
        style: {
          // 设置版本号，一定要设置
          version: 8,
          glyphs: 'http://http://xearth.cn:6213/sgis-assets/fonts/{fontstack}/{range}.pbf',
          // 添加来源
          sources: {
            tdtVec: tdtVec,
@@ -140,7 +141,8 @@
            wmts: wmts,
            buildings: buildings,
            // "wms":wms,
            test: test
            test: test,
            anno: test
          },
          layers: [
            {
@@ -206,7 +208,7 @@
              type: 'circle',
              source: 'test',
              'source-layer': 'points',
              // "source-layer": "controlpoint",
              // 'source-layer': 'controlpoint',
              minzoom: 0,
              maxzoom: 18,
              // "paint": {
@@ -224,7 +226,7 @@
                  ]
                },
                'circle-color': {
                  // property: 'v',
                  // property: 'measattribute',
                  stops: [
                    [1, '#990055'],
                    [2, '#cdb640']
@@ -233,6 +235,51 @@
                },
                'circle-opacity': 1
              }
            },
            {
              // 郊区
              id: 'anno',
              type: 'symbol',
              source: 'anno',
              'source-layer': 'points',
              minzoom: 14,
              maxzoom: 17,
              // filter: [
              //   '==',
              //   'fclass',
              //   'suburb'
              // ],
              layout: {
                'text-field': '{measattribute}',
                // 'text-transform': 'uppercase',
                'text-font': [
                  // 这个就是{fontstack}，也就是字体文件夹的名称
                  'Microsoft YaHei Regular'
                ],
                'text-letter-spacing': 0.15,
                'text-max-width': 7,
                'text-padding': 3,
                'text-size': {
                  base: 1,
                  stops: [
                    [
                      11,
                      11
                    ],
                    [
                      15,
                      18
                    ]
                  ]
                }
              },
              paint: {
                'text-halo-color': 'hsl(0, 0%, 100%)',
                'text-halo-width': 1,
                'text-color': 'hsl(230, 29%, 35%)',
                'text-halo-blur': 0.5
              },
              interactive: true
            }
          ]
        },
@@ -253,8 +300,16 @@
      )
      // 添加导航控件，控件的位置包括'top-left', 'top-right','bottom-left' ,'bottom-right'四种，默认为'top-right'
      map.addControl(nav, 'top-left')
      map.on('click', function (e) {
      // map.on('click', function (e) {
      //   console.log(e)
      // })
      map.on('click', 'test', function (e) {
        if (e.defaultPrevented) {
          return
        }
        e.preventDefault()
        console.log(e)
        console.log(e.features)
      })
      console.log(geojson)
    }