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

大家好，欢迎来到IT知识分享网。

前言：

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

实现效果：

相关资料：

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