您好,登錄后才能下訂單哦!
這篇文章主要介紹“怎么用Vue+Openlayer實(shí)現(xiàn)動(dòng)態(tài)加載geojson”,在日常操作中,相信很多人在怎么用Vue+Openlayer實(shí)現(xiàn)動(dòng)態(tài)加載geojson問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”怎么用Vue+Openlayer實(shí)現(xiàn)動(dòng)態(tài)加載geojson”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
加載1個(gè)或多個(gè)要素
<template> <div id="map" ></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 areaGeo from "@/assets/chengdu.json"; export default { data() { return { map: {}, areaLayer: {}, }; }, mounted() { this.initMap(); //初始化地圖方法 this.addArea(areaGeo); //添加區(qū)域圖層方法 this.pointMove(); this.getFeatureByClick(); }, methods: { pointMove() { // 設(shè)置鼠標(biāo)劃過(guò)矢量要素的樣式 this.map.on("pointermove", (e) => { const isHover = this.map.hasFeatureAtPixel(e.pixel); this.map.getTargetElement().style.cursor = isHover ? "pointer" : ""; }); }, getFeatureByClick() { this.map.on("click", (e) => { let features = this.map.getFeaturesAtPixel(e.pixel); this.map.getView().fit(features[0].getGeometry(), { duration: 1500, padding: [100, 100, 100, 100], }); }); }, /** * 設(shè)置區(qū)域 */ addArea(geo = {}) { if (Object.keys(geo).length == 0 && geo.features.length == 0) return; // 設(shè)置圖層 this.areaLayer = new VectorLayer({ source: new VectorSource({ features: [], }), }); // 添加圖層 this.map.addLayer(this.areaLayer); let features = geo.features; for (let i in features) { let areaFeature = {}; if (features[i].geometry.type == "MultiPolygon") { areaFeature = new Feature({ geometry: new MultiPolygon(features[i].geometry.coordinates), }); } else if (features[i].geometry.type == "Polygon") { areaFeature = new Feature({ geometry: new Polygon(features[i].geometry.coordinates), }); } areaFeature.setStyle( new Style({ fill: new Fill({ color: "#4e98f444" }), stroke: new Stroke({ width: 3, color: [71, 137, 227, 1], }), }) ); areaFeature.setProperties(features[i].properties); this.areaLayer.getSource().addFeature(areaFeature); } }, /** * 初始化地圖 */ initMap() { this.map = new Map({ target: "map", 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: [103, 31], zoom: 7, }), }); }, }, }; </script>
到此,關(guān)于“怎么用Vue+Openlayer實(shí)現(xiàn)動(dòng)態(tài)加載geojson”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。