前言:
随着现在国网等一部分公司的需求,在线地图-思极地图 出现在我们眼前,给我们带来了很多便利,这里分享下他的信息与使用。
实现效果:
相关资料:
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 }] // 可以根据需求选择地图图层
});
}