南京地图njmaps使用，以公众版为例

比较冷门的地图，除非特殊指定，应该用的人不多，记录下，后面还要优化

1/在index.html中引入地图api相关脚本，njtoken是要自己申请的

2/添加地图容器，指定宽高，没有高度，地图不显示

3/创建地图实列，给地图增加比例尺、缩放、画点画面及搜索功能

<template>
  <div class="map-demo">
    <div id="map" ref="map" class="map"></div>
    <div class="input-card" style="max-height: calc(100% - 20rem)">
      <div class="input-item">
        <el-input type="text" id="queryText" value="" placeholder="地名地址搜索">
          <el-button slot="append" icon="el-icon-search" type="primary"></el-button>
        </el-input>
      </div>
      <div class="info1" id="resultDom"></div>
      <div class="close">x</div>
    </div>
    <div class="input-item-radio">
      <div class="pointbtn">
        <svg-icon class-name="画点" icon-class="画点" @click="changeMode(1)"></svg-icon>
        <span class="input-text" @click="changeMode(1)">画点</span>
        <!-- <svg-icon class-name="画线" icon-class="画线" @click="changeMode(2)"></svg-icon>
        <span class="input-text" @click="changeMode(2)">画线</span> -->
        <svg-icon class-name="画面" icon-class="画面" @click="changeMode(3)"></svg-icon>
        <span class="input-text" @click="changeMode(3)">画面</span>
      </div>
      <div class="delbtn">
        <svg-icon class-name="删除按钮" icon-class="删除按钮" @click="deleteAll()"></svg-icon>
        <span class="input-text" @click="deleteAll()">清除</span>
      </div>
    </div>
    <div class="panel">
      <span id="font"></span>
    </div>
  </div>
</template>

data() {
    return {
     
      map: null,
      drawCtrl: null,
    }
  },

实例初始化的时候用定时器包一下，防止数据先渲染，地图还没有创建好，加定时器后先创建地图，再渲染数据

 mounted() {
    let that = this
    // that.$nextTick(() => {}) // 微任务
    setTimeout(() => {
      that.getinit()
    }, 0) // 宏任务
    that.gettip()
  },

getinit() {
      let that = this
      that.map = new GeoGlobe.Map({
        container: 'map', // 绑定容器
        mapCRS: '4490', // 定义坐标系
        zoom: 13, // 当前缩放级别
        center: [118.778, 32.043], // 定位中心点
        maxZoom: 20, // 最大缩放级别
        minZoom: 8, // 最小缩放级别
      })
      var token = '2632890994340fb68c706b9df2c630f3'
      // this.map = map
      // console.log(this.map, 'this.map')
      // 地图加载事件
      that.map.on('load', function () {
        // 加载南京公众版矢量地图
        var dt_layer = new GeoGlobe.NJLayer('esri_vec_dt_public')
        that.map.loadSprite(dt_layer.sprite)
        that.map.style.setGlyphs(dt_layer.glyphs)

        that.map.addLayer(dt_layer)

        // 加载南京公众版矢量注记
        // 延时加载注记，优化底图加载速度
        setTimeout(function () {
          var zj_layer = new GeoGlobe.NJLayer('esri_vec_zj_public')
          that.map.loadSprite(zj_layer.sprite)
          that.map.style.setGlyphs(zj_layer.glyphs)
          that.map.addLayer(zj_layer)
        }, 10)
      })
      // 获取导航控件
      var Na_control
      if (Na_control == undefined) {
        Na_control = new GeoGlobe.Control.Navigation()
        that.map.addControl(Na_control, 'bottom-right')
        // 将获取的zoom值添加到html中
        document.getElementById('font').innerHTML = that.map.getZoom()

        /*********添加zoom改变监听事件********/
        that.map.on('zoomend', function (e) {
          document.getElementById('font').innerHTML = that.map.getZoom()
        })
      }
      // 获取比例尺控件容器
      var Sca_control
      if (Sca_control == undefined) {
        Sca_control = new GeoGlobe.Control.Scale({
          position: '50%',
          maxWidth: 80,
          unit: 'imperial',
        })
        that.map.addControl(Sca_control)
      }
      that.getmarker()
    },
    // 搜索输入框
    gettip() {
      // 地名地址输入提示实例
      var sfCodingTips = new GeoGlobe.Query.SFCodingTips()
      // 参数
      var option = {
        q: null, //搜索提示词
      }

      // 提示词
      $('#queryText').keyup(function () {
        var keyWord = $('#queryText').val()
        if (keyWord) {
          option['q'] = keyWord
          sfQueryTip(option)
        }
      })

      // 点击关闭按钮，隐藏结果面板
      $('.close').click(function () {
        $('#resultDom').hide()
        $('.close').hide()
        $('#queryText').val('')
      })

      // 开始查询
      function sfQueryTip(option) {
        sfCodingTips.query(option, function (data) {
          var html = ''
          let features = data.features
          for (var i = 0; i < features.length; i++) {
            var name = features[i].properties.name
            var address = features[i].properties.address
            html += '<span><b>' + name + '</b><br/><label>' + address + '<label></span><br/>'
          }
          $('.close').show()
          $('#resultDom').show()
          $('#resultDom').html(html)
        })
      }
    },
    drawLIine(data) {
      let that = this
      // 画点、画线、画面
      if (data == 1) {
        that.map.on('click', function (e) {
          console.log(1)

          var lng = e.lngLat.lng
          var lat = e.lngLat.lat
          // 添加点
          var monument = [lng, lat]
          // 直接显示信息框
          var popup1 = new GeoGlobe.Popup({
            closeOnClick: true,
          })
            .setLngLat(monument)
            .setHTML(
              `
               <div class="mapboxgl-popup-content">
        <div class="map-popup">
          <div class="map-popup-article">

                            <header>
              <span >我的标记</span>

                <span class="right">
<i title="" class="close"></i>
                </span>
              </header>
              <article>
  <div class="common">
<div class="mark-popup">
<div class="mark-popup-item">
  <label >名称</label>
   <input id="mkrId" type="text" placeholder="我的标记">
</div>
<div  class="mark-popup-item">
  <label >备注</label>
  <textarea rows="3" placeholder="我的备注"></textarea>
</div>
<div  class="mark-popup-item flex-end">
  <input type="button" value="保存">
  <input type="button" value="删除">
</div>
</div>
  </div>
</article>
          </div>
        </div>
      </div>
            `
            )
            .addTo(that.map)
        })
      } else {
        that.map.on('dblclick', function (e) {
          console.log(2)
          var lng = e.lngLat.lng
          var lat = e.lngLat.lat
          // 添加点
          var monument = [lng, lat]
          // 直接显示信息框
          var popup1 = new GeoGlobe.Popup({
            closeOnClick: true,
          })
            .setLngLat(monument)
            .setHTML(
              `<input id="mkrId" type="text" style="border: none;"></br>
             <input type="button" name="btnOK"  
             onclick="fnOK(2)" value="保存">&nbsp;&nbsp; 
             <input type="button" name="btnClear"  
             onclick="fnClear(2);" value="删除">`
            )
            .addTo(that.map)
        })
      }
    },
    getmarker() {
      // 实例化画图控件
      let that = this
      if (that.drawCtrl == null) {
        that.drawCtrl = new GeoGlobe.Control.Draw({
          displayControlsDefault: false,
        })
        that.map.addControl(that.drawCtrl)

        // 以下去除连续绘制
        // that.drawCtrl = drawCtrl
        // that.map.on('draw.create', function (e) {
        //   //   // 连续绘制

        //   var model = that.drawCtrl.getMode()
        //   setTimeout(function () {
        //     that.drawCtrl.changeMode(model)
        //   }, 1)
        // })
      }
    },
    changeMode(mode) {

      let that = this
      switch (mode) {
        case 1:
          that.deleteAll()
          that.drawCtrl.changeMode('draw_point') // 点
          that.drawLIine(1)
          break
        case 2:
          that.deleteAll()
          that.drawCtrl.changeMode('draw_line_string') // 线
          that.drawLIine(2)
          break
        case 3:
          that.deleteAll()
          that.drawCtrl.changeMode('draw_polygon') // 面
          that.drawLIine(2)
          break
      }
    },
    deleteAll() {
      let that = this
      that.drawCtrl.deleteAll() // 控件删除
    that.drawCtrl.changeMode(that.drawCtrl.modes.STATIC)
    },

<style scoped lang="scss">
.map-demo {
  position: relative;
  height: 100%;
  width: 100%;

  .input-card {
    z-index: 9;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    width: 24rem;
    border-width: 0;
    border-radius: 0.4rem;
    position: absolute;
    top: 0;
    left: 0;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
    .close {
      font-size: 20px;
      position: absolute;
      right: 2rem;
      display: none;
      top: 0.6rem;
      cursor: pointer;
    }

    .info1 {
      padding: 0.75rem 1.25rem;
      margin-top: 1rem;
      background-color: white;
      width: auto;
      border-width: 0;
      border-top: 1px solid rgba(114, 124, 245, 0.5);
      display: none;
    }

    .input-item {
      height: 3rem;
    }
  }
  // 画点画面画线
  .input-item-radio {
    z-index: 9;
    position: absolute;
    top: 1rem;
    right: 7rem;
    .pointbtn {
      width: 13rem;
      height: 2rem;
      border-radius: 0.2rem;
      text-align: center;
      line-height: 2rem;
      color: #c1c1c1;
      background: #fff;
      span {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
      }
    }
    .delbtn {
      position: absolute;
      top: 0rem;
      right: -6rem;
      background: #e62d33;
      width: 5rem;
      height: 2rem;
      border-radius: 0.2rem;
      text-align: center;
      line-height: 2rem;
      color: #fff;
      span {
        padding-left: 0.2rem;
      }
    }
  }
  .panel {
    z-index: 9;
    position: absolute;
    bottom: 6.5rem;
    right: 1rem;
    span {
      font-size: 18px;
      font-weight: 600;
    }
  }
}
.map {
  height: 100%;
  width: 100%;
}
// 比例尺控件容器位置
/deep/ .mapboxgl-ctrl-bottom-left {
  bottom: 10%;
  left: 0;
}
.mapboxgl-popup-content {
  background: none;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 0;
  pointer-events: none;
  .map-popup {
    pointer-events: none;
    min-width: 260px;
    max-width: 500px;
    .map-popup-article {
      border: 1px solid #999;
      background-color: #fff;
      .right {
        float: right;
        .close {
          height: 16px;
          width: 20px;
          display: inline-block;
          background-repeat: no-repeat;
          background-position: 50%;
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAANCAYAAAB2HjRBAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTEvMjcvMTJkAtf+AAAAg0lEQVQokcWSQRaDIAxEv31Fr6oeyHhUdDPdEB4qdEEXzYZkYDJ5EwZJ9Marmwm8PTn2cQOW4s6m+VxbOACSkES0oDKiBUULWw13Tjm2HfuYi2k+AZZ0+nQAlgHvktQfSvdJyvcXcqtBjfggdyt/MafZ4Ce3856T27U9c8c9GfSv7/kB0TU9azwFPjwAAAAASUVORK5CYII=);
        }
      }
      .common {
        margin: 0.8em 1em;
        .mark-popup {
          display: flex;
          width: 280px;
          .mark-popup-item {
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            width: 100%;
            margin-bottom: 7px;
          }
          .mark-popup-item:last-child {
            margin-bottom: 0;
          }
          .flex-end {
            -webkit-box-pack: end;
            -ms-flex-pack: end;
            float: right;

            // justify-content: flex-end;
          }
        }
      }
    }
  }
}
</style>

效果如下：