kpst._this這里指向初始化的map
// 設置標注樣式函數
function createStyle(name) {
// 河流style
var riverStyle = new Style({
stroke: new Stroke({
color: '#4e89d4',
width: 2
}),
fill: new Fill({
color: '#eee'
})
})
// 省份style·
var provinceStyle = new Style({
stroke: new Stroke({
color: '#4e89d4',
width: 1
}),
fill: new Fill({
color: '#eee'
})
})
//城市style·
if (name != '') {
var cityStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: '#05ab57',
}),
stroke: new ol.style.Stroke({
color: '#05ab57',
width: 1
}),
}),
text: new ol.style.Text({
textAlign: "center", // 位置
textBaseline: "top", // 基准線
font: "normal 12px 微軟雅黑", // 文字樣式
text: name,
fill: new ol.style.Fill({
color: "#333",// 文本填充樣式(即文字顏色)
}),
stroke: new ol.style.Stroke({
color: "#Fff",
}),
zIndex: 9
})
})
}
return {
riverStyle,
provinceStyle,
cityStyle
}
}
//創建圖層
function creatlayer(name) {
var layer
if (name != 'city') {
layer = new VectorLayer({
name: name,
source: new VectorSource({
// 地圖的坐標系是CGCS2000,json數據也要是CGCS2000
features: (new GeoJSON()).readFeatures(require("../../assets/data/" + name + '.json'))
}),
style: createStyle()[name + 'Style']
});
} else {
var features = (new GeoJSON()).readFeatures(require("../../assets/data/city.json"))
for (let i = 0; i < features.length; i++) {
const feature = features[i];
feature.setStyle(createStyle(feature.get("NAME")).cityStyle)
}
layer = new VectorLayer({
name: name,
source: new VectorSource({
features: features
})
})
}
kpst._this.addLayer(layer);
return layer
};
// 將圖層加載到地圖,並將所加圖層賦給地圖的某個對象
function layerFx(name) {
kpst._this[name] = creatlayer(name)
}
// 將圖層加載函數掛載到地圖
kpst._this.layerFx = layerFx