首页 前端知识 一个很好用的地图工具的使用:思极地图,以及vue 思极地图的使用

一个很好用的地图工具的使用:思极地图,以及vue 思极地图的使用

2024-08-08 22:08:58 前端知识 前端哥 194 80 我要收藏

前言:

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

实现效果:

相关资料:

1、官网地址

2、在线地址
3、官方api地址

实现步骤-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 }] // 可以根据需求选择地图图层
  });
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15045.html
标签
mapbox高亮
评论
发布的文章

jQuery

2024-01-31 12:01:10

JQuery操作DOM

2024-04-13 23:04:28

jQuery入门(五)Ajax和json

2024-08-16 22:08:14

Aristo jQuery UI 主题教程

2024-08-16 22:08:14

常用js库和框架(echarts)

2024-08-16 22:08:08

ECharts基础配置详解

2024-08-16 22:08:07

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!