vue + openlayers 实现省市区的描边界与区域填充
程序员文章站
2022-03-07 21:37:31
npm install olgeoJson提供边界数据的网址，自行选择需要的区域的边界，下载json数据geo数据源将下载的数据源放到新建的province.json 文件里面，在最外层加上[] 数组，每一条需要展示的数据源为一个对象（以数组对象的形式存放）复制即可查看效果
效果展示：
npm install ol
geoJson提供边界数据的网址，自行选择需要的区域的边界，下载json数据
geo数据源
将下载的数据源放到新建的province.json 文件里面，在最外层加上[] 数组，每一条需要展示的数据源为一个对象（以数组对象的形式存放）
复制即可查看效果
<template>
<div class="openlayers">
<div id="Map" ref="map"></div>
</div>
</template>
<script>
import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import XYZ from "ol/source/XYZ";
import { Map, View, Feature, ol } from "ol";
import { Style, Stroke, Fill } from "ol/style";
import { Polygon, MultiPolygon } from "ol/geom";
import { defaults as defaultControls, OverviewMap } from "ol/control";
import areaGeo from "@/tools/provinces.json";
export default {
data() {
return {
map: null,
routeLayer: null,
routeFeature: null,
lineData: [],
};
},
created() {},
mounted() {
this.initMap();
this.addArea(areaGeo);
},
methods: {
// 初始化地图
initMap() {
this.map = new Map({
target: "Map",
controls: defaultControls({
zoom: true,
}).extend([]),
layers: [
new TileLayer({
source: new XYZ({
url:
"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
}),
}),
],
view: new View({
projection: "EPSG:4326",
center: [118.792207,32.133476],
zoom: 9,
maxZoom: 19,
minZoom: 5,
}),
});
},
// 设置区域
addArea(geo = []) {
if (geo.length == 0) {
return false;
}
let features = [];
geo.forEach((g) => {
console.log(g);
let lineData = g.features[0];
let routeFeature = "";
console.log(lineData.geometry.type);
if (lineData.geometry.type == "MultiPolygon") {
routeFeature = new Feature({
geometry: new MultiPolygon(lineData.geometry.coordinates),
});
} else if (lineData.geometry.type == "Polygon") {
routeFeature = new Feature({
geometry: new Polygon(lineData.geometry.coordinates),
});
}
routeFeature.setStyle(
new Style({
fill: new Fill({
color: "#4e98f444", //填充颜色
}),
stroke: new Stroke({
width: 3, //边界宽度
color: [71, 137, 227, 1], //边界颜色
}),
})
);
features.push(routeFeature);
});
// 设置图层
let routeLayer = new VectorLayer({
source: new VectorSource({
features: features,
}),
});
// 添加图层
this.map.addLayer(routeLayer);
},
},
};
</script>
<style lang="less" scoped>
#Map {
width: 100vw;
height: 100vh;
}
.openlayers /deep/ .ol-control button {
font-size: 3em;
}
</style>
本文地址：https://blog.csdn.net/qq_46003166/article/details/107542975