GIS地图-思极的简单使用

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

前言：

之前项目上有使用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., 39.90923], center: [105, 42.6], scrollZoom: { maxSpeed: 2, // 设置缩放速度的上限 maxZoom: 15, // 设置最大缩放级别 minZoom: 5, // 设置最小缩放级别 }, }); // 地图加载完成后 this.map.on("load", () => { //设置地图范围 let sw = new SGMap.LngLat(22.2994, 4.5847); let ne = new SGMap.LngLat(160.881, 64.919); 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: "f19802d7878be5b5bffd46ba2755a4", tokenTask_end: "c3f0cbbd4b2fc264c4e4d", // 地图样式 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, }, }); }

效果：

这是默认的颜色

这是有值的颜色

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