//初始化地图
initMap() {
let _this = this;
map = new mapboxgl.Map({
container: "collection-map",//地图容器
style: {
version: 8,
glyphs: "/font/{fontstack}/{range}.pbf",
sources: {},
layers: [
//地图增加背景色
{
id: "background",
type: "background",
layout: { visibility: "visible" },
paint: { "background-color": "#002B42" },
},
]
},
center: [106.29318, 30.29],
zoom: 4.2,
minZoom: 3.6,
pitch: 40,
bearing: -8,
});
map.on("load", function () {
_this.addLayer_country(); //添加国界面
_this.addLayer_countryLine(); //添加国界线
_this.addLabel_provience(); //添加省份标注
_this.addLabel_provienceLine(); //添加省份边界线
_this.addBase(); //添加地基点
_this.addLine();//添加迁徙线路
_this.addPowerPlant(); //添加发电厂
});
},
//添加国界面
addLayer_country() {
map.addSource("country_Area", {
type: "vector",
tiles: ['http://117.175.169.58:47781/gisserver/rest/services/featureserver/vector/country_Area/{z}/{x}/{y}'],
});
map.addLayer({
id: "country_Area",
source: "country_Area",
"source-layer": "country_Area",//source的type为vector时必须指定该值
type: "fill",
layout: {},
paint: {
"fill-opacity": 0.75,
"fill-color": "#082958",
},
});
},
//添加国界线
addLayer_countryLine() {
map.addSource("country_guojiexian", {
type: "vector",
tiles: ['http://117.175.169.58:47781/gisserver/rest/services/featureserver/vector/country_guojiexian/{z}/{x}/{y}'],
});
map.addLayer({
id: "country_guojiexian",
source: "country_guojiexian",
"source-layer": "country_guojiexian",//source的type为vector时必须指定该值
type: "line",
layout: {},
paint: {
"line-color": "#97C8F7",
"line-width": 3,
"line-opacity": 0.8,
},
});
},
//添加省份边界线
addLabel_provienceLine() {
map.addSource("country_Border", {
type: "vector",
tiles: ['http://117.175.169.58:47781/gisserver/rest/services/featureserver/vector/country_Border/{z}/{x}/{y}'],
});
map.addLayer({
id: "country_Border",
source: "country_Border",
"source-layer": "country_Border",//source的type为vector时必须指定该值
type: "line",
layout: {},
paint: {
"line-color": "#396FB5",
"line-width": 2,
"line-opacity": 0.9,
},
});
},
//添加省份标注
addLabel_provience() {
axios.get("/json/省份标注.json").then(res=>{
let provinceNameArr = res.data.features.slice();
provinceNameArr.forEach((v) => {
let xy = new mapboxgl.LngLat(v.properties.x, v.properties.y);
const el = document.createElement("div");
el.style.color = "#fff";
el.style.fontSize = "14px";
el.style.fontWeight = "bold";
el.style.opacity = "0.6";
const t = document.createTextNode(v.properties.name);
el.appendChild(t);
new mapboxgl.Marker({
element: el, // 只支持原生的html 元素
})
.setLngLat(xy) // 使用geoJson 里面的center 属性来
.addTo(map);
});
})
},
// 添加基地点位
addBase() {
let size = 100;
// 绘制动画点
let pulsingDot1 = {
width: size,
height: size,
data: new Uint8Array(size * size * 4),
onAdd: function () {
var canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
this.context = canvas.getContext("2d");
},
render: function () {
var duration = 1000;
var t = (performance.now() % duration) / duration;
var radius = (size / 2) * 0.3;
var outerRadius = (size / 2) * 0.7 * t + radius;
var context = this.context;
// draw outer circle
context.clearRect(0, 0, this.width, this.height);
context.beginPath();
context.arc(
this.width / 2,
this.height / 2,
outerRadius,
0,
Math.PI * 2
);
context.fillStyle = "rgba(46,129,192," + (1 - t) + ")";
context.fill();
// draw inner circle
context.beginPath();
context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
context.fillStyle = "rgba(46,129,192,1)";
context.strokeStyle = "white";
context.lineWidth = 2 + 4 * (1 - t);
context.fill();
context.stroke();
// update this image's data with data from the canvas
this.data = context.getImageData(0, 0, this.width, this.height).data;
// keep the map repainting
map.triggerRepaint();
// return `true` to let the map know that the image was updated
return true;
},
};
let pulsingDot2 = {
width: size,
height: size,
data: new Uint8Array(size * size * 4),
onAdd: function () {
var canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
this.context = canvas.getContext("2d");
},
render: function () {
var duration = 1000;
var t = (performance.now() % duration) / duration;
var radius = (size / 2) * 0.3;
var outerRadius = (size / 2) * 0.7 * t + radius;
var context = this.context;
// draw outer circle
context.clearRect(0, 0, this.width, this.height);
context.beginPath();
context.arc(
this.width / 2,
this.height / 2,
outerRadius,
0,
Math.PI * 2
);
context.fillStyle = "rgba(102,184,124," + (1 - t) + ")";
context.fill();
// draw inner circle
context.beginPath();
context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
context.fillStyle = "rgba(102,184,124,1)";
context.strokeStyle = "white";
context.lineWidth = 2 + 4 * (1 - t);
context.fill();
context.stroke();
// update this image's data with data from the canvas
this.data = context.getImageData(0, 0, this.width, this.height).data;
// keep the map repainting
map.triggerRepaint();
// return `true` to let the map know that the image was updated
return true;
},
};
// 设置基地数据(baseList为原始基地数据)
axios.get("/json/基地点.json").then(res=>{
let newBase = res.data.slice();
let newArr = newBase.map((v) => {
return {
type: "Feature",
geometry: {
type: "Point",
coordinates: v.coordinates,
},
properties: {
Name: v.name,
edition: v.edition,
offset: v.offset,
},
};
});
// 添加2种脉冲图片
map.addImage("pulsing-dot1", pulsingDot1, { pixelRatio: 2 });
map.addImage("pulsing-dot2", pulsingDot2, { pixelRatio: 2 });
map.addSource("base", {
type: "geojson",
data: {
type: "FeatureCollection",
features: newArr,
},
});
map.addLayer({
id: "points",
type: "symbol",
source: "base",
layout: {
"icon-image": [
"match", //使用匹配方法
["get", "edition"], //匹配属性
1, //key
"pulsing-dot1", //value
2, //key
"pulsing-dot2", //value
"pulsing-dot2", //default
],
// "icon-image": "pulsing-dot2",
"text-field": ["get", "Name"],
"text-font": ["Open Sans Semibold,Arial Unicode MS Bold"],
"text-size": 18,
"text-ignore-placement": true, //文本忽略位置
"text-offset": ["get", "offset"],
"text-anchor": "top",
"icon-size": 1,
"icon-ignore-placement": true, //图标忽略位置
// 点位过多,地图缩放时,重叠在一起的点位会隐藏,
// 此处点位渲染了“text”和“icon”,必须同时设置“text”和"icon"的忽略位置属性,单独设置不生效
},
paint: {
"text-color": "#fff",
"text-halo-color": "#000",
"text-halo-width": 2,
},
});
})
},
// 添加迁徙线路,需在index.htm中引入echarts.js和EchartsLayer.js
addLine() {
let echartslayer;
axios.get("/json/基地点.json").then(res=>{
let lineList = res.data.slice();
// 转换迁徙图数据
let convertData = function (data) {
let res = [];
for (let i of data) {
res.push({
coords: [i.coordinates, [116.4, 39.9]], //所有基地汇总到北京
});
}
return res;
};
// 迁徙图路线样式
let series = [
{
coordinateSystem: "GLMap",
type: "lines",
zlevel: 1,
effect: {
show: true,
period: 5,
trailLength: 0.7,
color: "#dff0f7",
symbolSize: 5,
},
lineStyle: {
normal: {
color: "#5fccfa",
width: 1,
opacity: 0.4,
curveness: 0.3,
},
},
data: convertData(lineList),
},
];
// 设置迁徙图
let option = {
GLMap: {
roam: true,
},
series: series,
};
echartslayer = new EchartsLayer(map);
echartslayer.chart.setOption(option);
})
},
//添加发电厂
addPowerPlant(){
function arrayGetText(defaultArray, transformArray) {
let arr = [];
defaultArray.forEach((e) => {
transformArray.find((i) => {
if (e.properties.name == i.NAME) {
e.properties.capacity = i.capacity + "万KW";
e.properties.capacityNum = i.capacity * 20000;
arr.push(e);
}
});
});
return arr;
}
function arrayGetCircle(defaultArray, transformArray) {
let arr = [];
defaultArray.forEach((e) => {
transformArray.find((i) => {
if (e.properties.name == i.NAME) {
//构建圆形
// 30:半径
// steps: 精度
// units:单位
// properties:属性
arr.push(turf.circle(e.geometry.coordinates, 30, {
steps: 128,
units: "kilometers",
properties: e.properties,
}));
}
});
});
return arr;
}
axios.get("/json/省份.json").then(res=>{
let provincePoint = res.data;
axios.get("/json/发电厂.json").then(res2=>{
let newArray = res2.data;
provincePoint.features = arrayGetText(provincePoint.features, newArray)
// 添加3d柱状图
provincePoint.features = arrayGetText(provincePoint.features, newArray);
let bars = arrayGetCircle(provincePoint.features, newArray)
map.addSource("building", {
type: "geojson",
data: {
type: "FeatureCollection",
features: bars,
},
});
map.addLayer({
id: "3d-buildings",
source: "building",
type: "fill-extrusion",
paint: {
//根据capacityNum填充不同颜色
"fill-extrusion-color": [
"interpolate",
["exponential", 1],
["get", "capacityNum"],
//分类颜色设置(必须按顺序)
5000000,
"rgb(0, 210, 145)",
10000000,
"rgb(171, 255, 80)",
15000000,
"rgb(255, 73, 73)",
25000000,
"rgb(0, 255, 252)",
],
//根据zoom地图缩放层级填充不同高度
"fill-extrusion-height": [
"interpolate",
["linear"],
["zoom"],
4,
0,
14.05,
["get", "capacityNum"],
],
"fill-extrusion-opacity": 1,
},
});
})
})
}
数据下载地址:https://download.csdn.net/download/weixin_39150852/19333811