map -- mapbox 基础应用

使用mapbox卫星地图注意：

1. 引入版本要与样式选择的版本对应，语言版本也要有对应否则会不生效；
2. 尽量查看英文文档;

vue中使用

npm install mapbox-gl @mapbox/mapbox-gl-geocoder @mapbox/mapbox-gl-language

import mapboxgl from "mapbox-gl"
import 'mapbox-gl/dist/mapbox-gl.css' // 可以在main.js中引用 
import MapboxLanguage from '@mapbox/mapbox-gl-language'
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'

// 设置语言
if (mapboxgl.getRTLTextPluginStatus() !== 'loaded') {
   mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js') 
}
this.map.addControl(new MapboxLanguage({
    defaultLanguage: 'zh'
})); // MapboxLanguage如果不传递参数，默认地图会根据设备语言进行显示；语言引入版本不同可能默认语言传递参数不同例如zh/zh-Hans

Turf.js

绘制敏感区域以及判断区域是否包含某个坐标点，可以使用插件

全部引入&按需引入

import * as turf from '@turf/turf'
import {booleanPointInPolygon} from '@turf/turf' 

也可单独引入某一个

import booleanPointInPolygon from '@turf/boolean-point-in-polygon'

mapbox定位当前位置功能文档
在使用过程中有些不好用，所以应用的高德地图获取位置自定义坐标点，返回当前位置也是应用的高德地图

handleCurrentPosition() { // gorde 获取当前位置
  var self = this
  var mapObj = new AMap.Map('iCenter')
  mapObj.plugin('AMap.Geolocation', function() {
    var geolocation = new AMap.Geolocation({
      enableHighAccuracy: true, // 是否使用高精度定位，默认：true
      convert: true,
      showMarker: true,
      showCircle: false,
      panToLocation: true, // 定位成功后，是否把定位得到的坐标设置为地图中心点坐标
      timeout: 10000
    })
    mapObj.addControl(geolocation)
    geolocation.getCurrentPosition()
    geolocation.on('complete', onComplete)
    function onComplete(data) { // data是具体的定位信息
      if (data.info === 'SUCCESS') {
        if (data.position && data.position.lng) {
          if(!self.map) {return}
            if(self.currentMarker) {
            self.currentMarker.remove()
          }
          self.map.setCenter(self.center)
          self.map.setZoom(14)
          var el = document.createElement('div')
          el.className = 'currentPoint'
          self.currentMarker = new mapboxgl.Marker({ element: el, anchor: 'bottom' })
          self.currentMarker.setLngLat(self.center).addTo(self.map)
        }
      }
    }
  })
}