vue实现天地图行政区（新疆为例）轮廓描边（一）

本文链接：https://blog.youkuaiyun.com/weixin_49099187/article/details/121476985

引入天地图文件

<meta http-equiv="Content-Security-Policy" content="default-src *; img-src * http://api.tianditu.com/img/map/mapctrls.png data: http://api.tianditu.com;style-src 'self' 'unsafe-inline' http://api.tianditu.gov.cn/v4.0/css/tianditu4.0.css; script-src * 'unsafe-inline' 'unsafe-eval'">
<meta http-equiv="P3P" content='CP="IDC DSP COR CURa ADMa  OUR IND PHY ONL COM STA"'>
<link rel="icon" href="<%= BASE_URL %>logo.ico">
<script src="config.js"></script>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥"></script>

页面加载天地图

loadMap () {
      let location = this.defaultLocation // 设置地图中心点
      let lnglat = new T.LngLat(location.lng, location.lat) // 创建经纬度坐标
      let imageURL = 'http://t0.tianditu.gov.cn/img_w/wmts?' +
        'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' +
        '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的密钥' // 影像图层
      let imageURL2 = 'http://t0.tianditu.gov.cn/cia_w/wmts?' +
        'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' +
        '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的密钥' // 影像注记
      const lay = new T.TileLayer(imageURL, { opacity: this.opacity })
      const lay2 = new T.TileLayer(imageURL2, { opacity: this.opacity })
      const config = { layers: [lay,lay2], name: 'TMAP_SATELLITE_MAP' } // 卫星视图
      if (this.map === null) {
        this.map = new T.Map('mapContainer', config) // 创建地图实例
        this.map.centerAndZoom(lnglat, this.mapZoom) // 地图初始化
        this.map.disableScrollWheelZoom() // 禁止地图缩放
        this.map.disableDrag() // 禁止地图拖拽
        this.map.disableDoubleClickZoom() // 禁用双击变大
        // this.map.disableKeyboard() // 禁止键盘操作
        // this.map.disableInertia() // 禁用地图惯性拖拽
      } else {
        this.map.panTo(lnglat) // 地图定位
      }
    }

实现效果如下：
在这里插入图片描述

绘制新疆轮廓

drawLine () {
      let style = {
        color: 'blue',
        weight: 3,
        opacity: 1,
        lineStyle : 'dashed', // 虚线
        fillColor : 'transprent',
        fillOpacity : 0 // 透明度
      }
      let points = []
      lines.forEach(line => { // lines是边界经纬度组成的数组
        var point = new T.LngLat(line[0], line[1])
        points.push(point)
      })
      var poly = new T.Polygon(points, style)
      this.map.addOverLay(poly)
    }