思极地图创建

前言: 24年十月份跟公司参与西安培训学习，使用思极地图做gis平台的开发。所以整理一下地图gis相关的功能实现

相关链接

思极地图开放平台：https://map.sgcc.com.cn/products/epgis_portals/index.html#/
开发文档（v3版本）：https://map.sgcc.com.cn/products/js-sdk/v3/#quick/quickstart
开发文档（v2版本）：https://map.sgcc.com.cn/products/js-sdk/v2/#guide?path=0,0

地图准备

在Webpack中可以使用html-webpack-plugin插件实现script标签动态赋值

// vue.config.js中
module.exports = {
  chainWebpack: (config) => {
    config.plugin('html').tap((args) => {
       args[0].mapJsUrl = "https://map.sgcc.com.cn/maps?v=3.0.0"; // 可以根据环境变量动态设置引入地址（内外网）
       // 根据需要修改其他选项
       return args;
    });
  },
};

// index.html中
<script src="<%= htmlWebpackPlugin.options.mapJsUrl %>"></script>// 动态获取html-webpack-plugin中添加的参数

地图密钥

获取地图密钥--这块似乎需要购买没找到位置
百度和高德的密钥可以通过开放平台注册账号后申请

// 使用密钥
SGMap.tokenTask
  .login("你申请的appKey", "你申请的appSecret")
  .then(function () {
    initMap();
  });

地图加载

//地图初始化
// 1. 新版底图只支持SDK 3.0.0 以上版本使用，低于 3.0.0 版本请使用 Streets 底图样式
// 2. 如果访问Streets-v2底图提示没有数据权限，请使用Streets底图样式
map = new SGMap.Map({
  // 地图绑定的DOM元素ID
  container: "map",
  // 地图样式
  style: "aegis://styles/aegis/Streets-v2",
  // style: "aegis://styles/aegis/Streets", // 矢量图层
  // style: "aegis://styles/aegis/StreetsLight", // 浅色主题
  // style: "aegis://styles/aegis/StreetsDark", // 深色主题
  // style: "aegis://styles/aegis/Satellite512", // 影像主题
  // 默认缩放层级
  zoom: 11,
  // 地图中心点
  center: [116.397428, 39.90923],
  // 地图默认字体
  localIdeographFontFamily: "Microsoft YoHei",
  dragPan: true, // 地图是否可以通过鼠标拖拽平移,默认 true
  dragRotate: true, // 地图是否可以旋转,默认true
  keyboard: true, // 地图是否可以通过键盘控制，默认为true
  doubleClickZoom: true, // 地图是否可以通过双击鼠标放大地图，默认为true
  scrollZoom: true, // 地图是否可以滚轮缩放,默认true
});

效果展示

思极地图效果展示.png