GIS地图-思极的简单使用

前言：

之前项目上有使用gis地图的需要，然后国网的项目又只让使用思极，所以就研究了下，基本满足了他们的使用，在这里分享下

官方API地址：

性能版范例https://map.sgcc.com.cn/products/js-sdk/v3/example.html?t=capability#lngLat/coordinate

参考步骤：

1.引入配置文件

可以直接引官网的，项目上内网开发，所以是放在cdn上的 

 <script src="/ami/cdn/gismap/sgMap.js" ignore></script>
    <!-- <script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script> -->

 2.申请key

加载地图，需要提前申请好appKey，appSecret，我这是通过接口配置返回的

userName，passWord就是申请的key和appSecret
 // 初始化sgMap
    initMap() {
      queryMapLoading()
        .then((res) => {
          if (res.data.code && res.data.data) {
            const config = res.data.data;
            // 保存地图配置
            sgMapConfig.config = config;
            sgMapConfig.tokenTask_start = config.userName;
            sgMapConfig.tokenTask_end = config.passWord;
            SGMap.config.API_URL = config.url;
            console.log("SGMap地址-" + SGMap.config.API_URL);
            SGMap.tokenTask.login(sgMapConfig.config.userName, sgMapConfig.config.passWord).then(() => {
              this.createMap();
            });
          }
        })
        .catch(() => {
          SGMap.tokenTask.login(sgMapConfig.tokenTask_start, sgMapConfig.tokenTask_end).then(() => {
            this.createMap();
          });
        });
    },
  // 创建地图
    createMap() {
      const that = this;
      this.map = new SGMap.Map({
        zoom: 3.55, // 默认缩放层级
        style: sgMapConfig.style,
        container: "map-marker",//你容器的id
        localIdeographFontFamily: sgMapConfig.fontFamily,
        // center: [116.397428, 39.90923],
        center: [105, 42.6],
        scrollZoom: {
          maxSpeed: 2, // 设置缩放速度的上限
          maxZoom: 15, // 设置最大缩放级别
          minZoom: 5, // 设置最小缩放级别
        },
      });
  // 地图加载完成后
      this.map.on("load", () => {
        //设置地图范围
        let sw = new SGMap.LngLat(22.617671291422994, 4.455498527555847);
        let ne = new SGMap.LngLat(160.70468025021881, 64.12158671155919);
        this.map.setMaxBounds(new SGMap.LngLatBounds(sw, ne));
        this.addMarker(this.map); // 缩放控件
        
        this.mapProcessing(); // 地图处理
      });
      //地图缩放前
      let startZoom = 4;
      this.map.on("zoomstart", function () {
        startZoom = this.getZoom();
      });
      //绑定地图缩放后事件
      this.map.on("zoomend", function () {
        let currZoom = this.getZoom();
        that.mapZoom = Number(currZoom);

        
      });
//这是配置参考
export const sgMapConfig = {
  // API地址
  apiURL: "https://map.sgcc.com.cn",
  // token-获取token
  tokenTask_start: "f19802d7878b31232131e5b5bffd46ba2755a4",
  tokenTask_end: "14974776032c3f0cb412312bd4b2fc264c4e4d",
  // 地图样式
  style: "aegis://styles/aegis/StreetsDark-v2",
  // 地图默认字体
  fontFamily: "Microsoft YoHei",
  light: {
    anchor: "viewport",
    color: "white",
    intensity: 0.4,
  },
};

大概步骤就是上面的内容，具体的配置根据个人项目具体操作

颜色相关配置如下

 const colorCustom = ["#E4D7D7", "#F37F80", "#EF4C4D", "#E92526", "#D03437", "#7D010C"];
      const { colorMap, ranges } = calculateColorAndRanges(value30Percent, value70Percent, colorCustom);
      this.ranges = ranges;

      const newFillColorExpression = [
        "case",

        // 内蒙古设置为蓝色
        ["==", ["get", "orgName"], "内蒙"],
        "blue",

        // 海南设置为绿色
        ["==", ["get", "orgName"], "海南"],
        "green",

        // 其余省份使用原有的step表达式
        ["step", ["get", "outageNum"], ...colorMap],
      ];
      //加载行政区域图层，如果存在先清除在加载。
      if (this.map.getLayer("adminRegionLayer")) {
        // 更新图层绘制属性
        this.map.setPaintProperty("adminRegionLayer", "fill-color", newFillColorExpression);
        this.map.getSource("adminRegionLayer").setData({
          type: "FeatureCollection",
          features: provinceFeatures,
        });
      } else {
        // 类型是fill
        this.map.addLayer({
          id: "adminRegionLayer",
          type: "fill",
          source: {
            type: "geojson",
            data: {
              type: "FeatureCollection",
              features: provinceFeatures,
            },
          },
          paint: {
            "fill-color": newFillColorExpression,
            "fill-opacity": 0.8, // 透明度
            "fill-outline-color": "#FFFFFF",
          },
        });
      }


 // 定义颜色范围，根据值的范围动态计算
  const colorMap = [
    colorRange[0],
    Number(0.001),
    colorRange[1],
    Math.ceil(firstFifth * 1 + 0.001),
    colorRange[2],
    Math.ceil(secondFifth * 1 + 0.001),
    colorRange[3],
    Math.ceil(thirdFifth * 1 + 0.001),
    colorRange[4],
    Math.ceil(fourthFifth * 1 + 0.001),
    colorRange[5],
    // Math.ceil(adjustedMaxValue * 1),
    // "rgba(237, 81, 70, 0.7)",
  ];
  // console.log(colorMap);
  const colorRangeVisual = [
    { color: colorRange[5], value: Math.ceil(fourthFifth * 1) },
    {
      color: colorRange[4],
      value: Math.ceil(fourthFifth * 1),
    },
    {
      color: colorRange[3],
      value: Math.ceil(thirdFifth * 1),
    },
    {
      color: colorRange[2],
      value: Math.ceil(secondFifth * 1),
    },
    {
      color: colorRange[1],
      value: Math.ceil(firstFifth * 1),
    },
    {
      color: colorRange[0],
      value: 0,
    },
  ];


//这是在图上贴了一层，展示名字+数值，数值是number格式的
//加载按区域在中心位置显示数量，如果存在先清除在加载。
      if (this.map.getLayer("regionCenterlayer")) {
        this.map.getSource("regionCenterlayer").setData({
          type: "FeatureCollection",
          features: prosymbolFeatures,
        });
      } else {
        this.map.addLayer({
          id: "regionCenterlayer",
          type: "symbol",
          source: {
            type: "geojson",
            data: {
              type: "FeatureCollection",
              features: prosymbolFeatures,
            },
          },

          layout: {
            "text-ignore-placement": true,
            "text-field": " {orgName} : {outageNum}",
            "text-size": 16,
            "text-anchor": "top",
            "text-allow-overlap": false,
            "text-offset": [0, 0],
          },
          filter: [
            "all",
            ["!", ["==", ["get", "orgName"], "内蒙"]],
            ["!", ["==", ["get", "orgName"], "海南"]],
            ["!", ["==", ["get", "orgName"], "台湾"]],
            ["!", ["==", ["get", "orgName"], "广西"]],
            ["!", ["==", ["get", "orgName"], "云南"]],
            ["!", ["==", ["get", "orgName"], "广东"]],
            ["!", ["==", ["get", "orgName"], "贵州"]],
          ],
          paint: {
            "text-color": "#ffffff",
            // "text-halo-color": "#FFFFFF",
            "text-halo-width": 1.33333,
          },
        });
      }

效果：

这是默认的颜色

这是有值的颜色

具体颜色可以自己配置，可以根据数值计算颜色，也可以根据名称单独设置，地图支持下钻，滚动或点击都可以