一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用

news2024/10/7 10:16:23

前言：

随着现在国网等一部分公司的需求，在线地图-思极地图出现在我们眼前，给我们带来了很多便利，这里分享下他的信息与使用。

实现效果：

实现步骤-js：

1、引入配置依赖文件

<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>

或者动态添加js地址

 const script = document.createElement("script");
script.src = "http://map-js.sgcc.com.cn/maps?v=3.0.0";
document.body.appendChild(script);

2、加载地图，需要提前申请好appKey，appSecret

<script>
      var map;

      // 申请的key和sn
      SGMap.tokenTask
        .login("你申请的appKey", "你申请的appSecret")
        .then(function () {
          initMap();
        });

      function initMap() {
        map = new SGMap.Map({
          // 地图绑定的DOM元素ID
          container: "map",
          // 地图样式
          style: "aegis://styles/aegis/Streets-v2",
          // 默认缩放层级
          zoom: 11,
          // 地图中心点
          center: [116.397428, 39.90923],
          // 地图默认字体
          localIdeographFontFamily: "Microsoft YoHei"
        });
      }
    </script>

实现步骤-vue：

1、安装对应的插件sjmap

npm i sjmap -S

2、新建一个登陆的方法，然后把拿到的token全局配置,可以放在app.vue，也可以放其他地方

 SGMap.tokenTask
   .login("你申请的appKey", "你申请的appSecret")
   .then(function (res) {
        
   });

import sjmap from "sjmap";
sjmap.config({
  token: "your-access-token"
});

3、新建一个map.vue文件，然后引入配置

<template>
  <div>
    <div id="map" ref='map' style="height: 100%"></div>
  </div>
</template>

import sjmap from "sjmap";
import "sjmap/dist/sjmap.css";
import "sjmap/dist/sjmap-3d.js";

mounted() {
  sjmap.initMap({
    container: 'map', //你容器的id或者用ref的话，this.$refs.map
    viewMode: sjmap.ViewMode.BIRDVIEW, // 使用鸟瞰视角
    mapOptions: {
      buildings: {
        color: "#FFFFFF" // 设置白模楼房颜色为白色
      }
    },
    layers: [{ type: sjmap.LayerType.TIANDITU_VECTOR }] // 可以根据需求选择地图图层
  });
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1846937.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！