minedata二维地图常用功能开发

引入

index.html
<!-- demo样式文件 -->
    <link rel="stylesheet" href="https://minedata.cn/support/static/api/demo/js-api/zh/css/demo.css">
    <!-- 引入MineMap API插件 -->
    <link rel="stylesheet" href="https://minedata.cn/minemapapi/v2.1.0/minemap.css">
    <script src="https://minedata.cn/minemapapi/v2.1.0/minemap.js"></script>

加载地图

 map.vue

<div id="map2d"></div>
getMap2D() {
      /**
       * 全局参数设置
       */
      window.minemap.domainUrl = 'https://minedata.cn'
      window.minemap.dataDomainUrl = 'https://minedata.cn'
      window.minemap.serverDomainUrl = 'https://minedata.cn'
      window.minemap.spriteUrl =
        'https://minedata.cn/minemapapi/v2.1.0/sprite/sprite'
      window.minemap.serviceUrl = 'https://mineservice.minedata.cn/service/'

      /**
       * key、solution设置
       */
      window.minemap.key = '16be596e00c44c86bb1569cb53424dc9'
      window.minemap.solution = 12877

      /**
       * 初始化地图实例
       */
      this.map = new window.minemap.Map({
        container: 'map2d',
        style:
          'https://mineservice.minedata.cn/service/solu/style/id/12877' /*底图样式*/,
        center: [116.46, 39.92] /*地图中心点*/,
        zoom: 10 /*地图默认缩放等级*/,
        pitch: 0 /*地图俯仰角度*/,
        maxZoom: 17 /*地图最大缩放等级*/,
        minZoom: 3 /*地图最小缩放等级*/,
        projection: 'MERCATOR',
      })
    },
    
    //此处error ‘minemap/map‘ is not defined no-undef报错解决
    //解决方案，在vue脚手架中，全局变量，使用window来访问，例如： window.minemap,window.map

自定义图标

map.loadImage(
        'https://minedata.cn/support/static/api/demo/js-api/zh/images/park.png',
        function (error, image) {
          if (error) throw error
          // 添加自定义图标
          map.addImage('park1', image)
        }
      )
      
      //park1就是添加得图标名称
      //map.loadImage()需要在map.load()后再调用

单一图层，加载多个图标

addSources(map) {
      var center = map.getCenter()
      map.loadImage(
        'https://minedata.cn/support/static/api/demo/js-api/zh/images/park.png',
        function (error, image) {
          if (error) throw error
          // 添加自定义图标
          map.addImage('park1', image)
        }
      )
      map.loadImage(
        'https://minedata.cn/support/static/api/demo/js-api/zh/images/park.png',
        function (error, image) {
          if (error) throw error
          // 添加自定义图标
          map.addImage('park2', image)
        }
      )
      //geojson数据
      var jsonData = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [center.lng + 0.03, center.lat + 0.02],
            },
            properties: {
              poiCode: 1, //唯一标识，切换图标
              title: '事件1',
              eventtype: '1',
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [center.lng + 0.01, center.lat - 0.01],
            },
            properties: {
              poiCode: 2,
              title: '事件2',
              eventtype: '1',
              //icon: 'Provincial-15-1',
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [center.lng - 0.03, center.lat - 0.02],
            },
            properties: {
              poiCode: 3,
              title: '事件3',
              eventtype: '2',
              //icon: 'Provincial-15-2',
            },
          },
        ],
      }
      //向map添加数据源pointSource
      map.addSource('pointSource', { //pointSource数据源名称
        type: 'geojson',
        data: jsonData,
      })
    },
    addLayers(map) {
      /* 单一图层显示多个图标,是通过icon-image绑定property中的的数据字段来实现的 */
      map.addLayer({
        id: 'symbolLayer',
        type: 'symbol',
        source: 'pointSource', //通过addSource添加的数据源
        layout: {
          'icon-image': 'park{eventtype}',
          'text-field': '{title}',
          'text-offset': [0, 0.6],
          'text-anchor': 'top',
          'icon-allow-overlap': true, //图标允许压盖
          'text-allow-overlap': true, //图标覆盖文字允许压盖
        },
        paint: {
          'text-color': '#ff0000',
          'text-halo-color': '#000000',
          'text-halo-width': 0.5,
        },
        minzoom: 7,
        maxzoom: 17.5,
      })
    },

单击图标图层，聚焦

onMouseClick(e, map) {
			//第一步，获取features
			var features = map.queryRenderedFeatures(e.point, {
				layers: ['symbolLayer'], //layer得id  symbolLayer
			})

			if (!features.length) {
				popup.remove()
				return
			}

			var feature = features[0]

			var coord = null

			var poiList = map.listImages() //获取所有的img图标
			console.log('poiList===', poiList)
			if (feature.layer.id == 'symbolLayer') {
				//设置选中得图标
				map.setLayoutProperty('symbolLayer', 'icon-image', [
					'case',
					['==', ['get', 'poiCode'], feature.properties.poiCode],
					'Tiananmen',
					'park1',
				])

				/************
				['==', ['get', 'poiCode'], feature.properties.poiCode],
				  'Tiananmen',
				  'park1',
				]
				这个类似三元表达式，feature.properties.poiCode当前点击得poi得唯一标识，和['get', 'poiCode']相等，图标使用'Tiananmen'，否则使用'park1'
				*************/

				console.log('feature.geometry====', feature.geometry)
				console.log('feature.properties====', feature.properties)
				coord = feature.geometry.coordinates
			}
			//popup
			let popup = new window.minemap.Popup({
				closeButton: true,
				closeOnClick: true,
			})
			if (coord) {
				popup
					.setLngLat(coord)
					.setHTML(
						feature.properties.title +
						'经纬度为：' +
						coord[0].toFixed(6) +
						',' +
						coord[1].toFixed(6) +
						', Helloworld'
					)
					.addTo(map)
			}
		},

切换底图，添加的 点、线、面图层消失

//解决方案
setStyle()设置 {diff: true,keepUserInfo: true}


that.map.setStyle(
          'https://mineservice.minedata.cn/service/solu/style/id/' + command,
          {
            diff: true, //如果为false或者不写这个参数，将强制把原有style剔除，直接更新为传入的style配置， 包括用户通过addLayer手动添加的图层也会删除。如果为true的话，用户手动添加的图层会根据options.keepUserInfo的值决定是否保留下来，同时替换旧style样式为新设置的style样式， 但是如果新的style里和旧的style里有重叠的图层，就会将重叠的图层保留下来。 
            keepUserInfo: true,//此参数起作用的前置条件是options.diff的值为true。此参数的值如果为true，用户添加的图层会被保留下来， 同时替换旧style样式为新设置的style样式；如果为false或者不传入此参数，用户添加的图层会被删除，同时替换旧style样式为新设置的style样式 
          }
        )