效果：以扬州市为例
一、App.vue全局引入思极地图js
mounted() {
// 全局引入思极地图
const script = document.createElement("script");
script.src = "http://map-js.sgcc.com.cn/maps?v=3.0.0";
document.body.appendChild(script);
}二、DOM层
<template>
<div class="body">
<div id="map" style="width: 100%; height: 100%;"></div>
</div>
</template>三、js
SGMap.tokenTask.login('申请的appkey', '申请的appsecret').then(function () {
SGMap.plugin("SGMap.DistrictTask").then(function (res) {
let districtTask = new SGMap.DistrictTask();
let map = new SGMap.Map({
container: "map",
style: "aegis: //styles/aegis/Streets",
zoom: 8,
center: [119.450070009243, 32.81896769039971],
localIdeographFontFamily: "Microsoft YoHei",
maxBounds: [[118, 31.8],[121, 33.8],],
});
map.on("load", function (e) {
map.addControl(new SGMap.ScaleControl({
maxWidth: 80,
unit: "metric",
}), "bottom-left");
// 行政区划面
map.addLayer({
id: "power-polygon",
type: "fill",
source: {
type: "geojson",
data: {
type: "FeatureCollection",
features: [],
},
},
paint: {
"fill-color": "#CCF3FF",
"fill-opacity": 0.2,
},
});
//行政区划边界线
map.addLayer({
id: "power-line",
type: "line",
source: {
type: "geojson",
data: {
type: "FeatureCollection",
features: [],
},
},
paint: {
"line-color": "#009587",
"line-width": 2,
},
});
//遮罩面
map.addLayer({
id: "mask-polygon",
type: "fill",
source: {
type: "geojson",
data: {
type: "FeatureCollection",
features: [],
},
},
paint: {
"fill-color": "#ffffff",
"fill-opacity": 0.5,
"fill-outline-color": "#3f61ea",
},
});
//面标注
map.addLayer({
id: "power-polygen-symbol",
type: "symbol",
source: {
type: "geojson",
data: {
type: "FeatureCollection",
features: [],
},
},
layout: {
"text-font": ["Microsoft YaHei Regular"],
"text-field": "{name}",
"text-size": 16,
},
paint: {
"text-color": "#009587",
},
});
// 行政区划名称查询行政区划
districtTask.searchDistrict({
keyword: "扬州市",
// 建议直辖市取2，其他省份取1，提升请求速度
subdistrict: 1,
extension: true,
}).then(function (result) {
var features = [],
featuresSymbol = [],
featuresPolygon = [],
// 外层遮罩方形边界
outSideShape = [
[
[109.08605140490641, 46.53186534100985],
[123.33266999835769, 46.53186534100985],
[123.33266999835769, 20.931139019287684],
[109.08605140490641, 20.931139019287684],
[109.08605140490641, 46.53186534100985],
],
],
// 主要区分直辖市和其他省份
district = result.data.districts[0].sub_districts.length == 1
? result.data.districts[0].sub_districts[0]
: result.data.districts[0];
for (var o in district.sub_districts) {
if (district.sub_districts[o].shape == undefined) continue;
let shape = district.sub_districts[o].shape;
let shapeMultiPolygon = [];
// 标注
featuresSymbol.push({
type: "Feature",
geometry: {
coordinates: district.sub_districts[o].center,
type: "Point",
},
properties: {
name: district.sub_districts[o].name,
},
});
// 边界
if (shape.type == "MultiPolygon") {
for (var o in shape.coordinates) {
features = features.concat(shape.coordinates[o]);
}
} else {
features.push(shape.coordinates[0]);
}
}
// 面数据和遮罩
if (district.shape.type == "MultiPolygon") {
for (var o in district.shape.coordinates) {
outSideShape = outSideShape.concat(district.shape.coordinates[o]);
featuresPolygon = featuresPolygon.concat(district.shape.coordinates[o]);
}
} else {
outSideShape = outSideShape.concat(district.shape.coordinates);
featuresPolygon = featuresPolygon.concat(district.shape.coordinates);
}
// 更新视图
// 遮罩
map.getSource("mask-polygon").setData({
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "MultiPolygon",
coordinates: [outSideShape],
},
},
],
});
// 行政区划面
map.getSource("power-polygon").setData({
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: featuresPolygon,
},
},
],
});
// 行政区划边界
map.getSource("power-line").setData({
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "MultiLineString",
coordinates: features,
},
},
],
});
//面标注数据
map.getSource("power-polygen-symbol").setData({
type: "FeatureCollection",
features: featuresSymbol,
});
});
//画marker点
if(null !=lstSmoke && lstSmoke.length > 0) {
lstSmoke.map(item=> {
if(item.backStatus == '0' && null != item.coordx && '' != item.coordx) {
const x = parseFloat(item.coordx);
const y = parseFloat(item.coordy);
const el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url("../../../assets/images/ding.gif")';
el.style.width = '20px';
el.style.height = '20px';
el.id = item.id;
const marker = new SGMap.Marker(el).setLngLat([x, y]).addTo(map);
el.addEventListener('click', clickMarkerPoint);
}
});
}
//画图片点，需要先加载图片 图片路径在页面部署在服务上时可以用相对路径
map.loadImage("../../../assets/images/ding.png", function (error, image) {
//添加图片到map，可以设置图片id
map.addImage("poi", image);
map.addLayer({
'id': "choicePoi",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
'type': "FeatureCollection",
"features": []
}
},
"layout": {
"icon-image": "poi",
"icon-size": 0.11,
//"icon-anchor":"bottom",
//"icon-offset":[0,0],
"icon-ignore-placement": true,
"text-ignore-placement": false,
'text-field': '{name}',
'text-size': 12,
'text-anchor': 'top',
'text-allow-overlap': false,
'icon-anchor': "bottom",
'text-offset': [0, 0],
'text-max-width': 8,
"text-font": ['Microsoft YaHei Regular']
},
'paint': {
'text-color': "#555252",
'text-halo-color': "#FFFFFF",
'text-halo-width': 1.33333
}
});
if(null !=lstSmoke && lstSmoke.length > 0) {
lstSmoke.map(item=> {
if(item.backStatus == '2' && null != item.coordx && '' != item.coordx) {
const x = parseFloat(item.coordx);
const y = parseFloat(item.coordy);
const temp = {
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [x, y]
},
'properties': {
'id': item.id
}
};
//添加进数组
result.features.push(temp);
}
});
map.getSource("choicePoi").setData(result);
}
});
// 绑定Layer自定义图片点事件
map.on('click', "choicePoi", clickLayerPoint);
//画图片点，需要先加载图片 图片路径在页面部署在服务上时可以用相对路径
map.loadImage("../../../assets/images/noding.png", function (error, image) {
//添加图片到map，可以设置图片id
map.addImage("poiOld", image);
map.addLayer({
'id': "choicePoiOld",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
'type': "FeatureCollection",
"features": []
}
},
"layout": {
"icon-image": "poiOld",
"icon-size": 0.11,
//"icon-anchor":"bottom",
//"icon-offset":[0,0],
"icon-ignore-placement": true,
"text-ignore-placement": false,
'text-field': '{name}',
'text-size': 12,
'text-anchor': 'top',
'text-allow-overlap': false,
'icon-anchor': "bottom",
'text-offset': [0, 0],
'text-max-width': 8,
"text-font": ['Microsoft YaHei Regular']
},
'paint': {
'text-color': "#555252",
'text-halo-color': "#FFFFFF",
'text-halo-width': 1.33333
}
});
if(null !=lstSmoke && lstSmoke.length > 0) {
lstSmoke.map(item=> {
if(item.backStatus == '1' && null != item.coordx && '' != item.coordx) {
const x = parseFloat(item.coordx);
const y = parseFloat(item.coordy);
const temp = {
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [x, y]
},
'properties': {
'id': item.id
}
};
//添加进数组
resultOld.features.push(temp);
}
});
map.getSource("choicePoiOld").setData(resultOld);
}
});
// 绑定Layer自定义图片点事件
map.on('click', "choicePoiOld", clickLayerPoint);
});
});
});四、遇到的问题
现场部署报如下错：
解决方案：
全局引入的思极地图js用http，不要用https
五、开发文档
思极地图开放平台 | 思极地图API SDK
https://map.sgcc.com.cn/products/epgis_portals/#/
