How to use Vue+Openlayer to dynamically load geojson

This article mainly introduces "how to use Vue+Openlayer to achieve dynamic loading of geojson". In daily operation, I believe that many people have doubts about how to use Vue+Openlayer to achieve dynamic loading of geojson. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "how to use Vue+Openlayer to achieve dynamic loading of geojson". Next, please follow the editor to study!

Load 1 or more featur

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 (); / / initialize map method this.addArea (areaGeo); / / add area layer method this.pointMove (); this.getFeatureByClick () }, methods: {pointMove () {/ / set the style of mouse-over vector features 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],});}) }, / * setting area * / addArea (geo = {}) {if (Object.keys (geo). Length = = 0 & & geo.features.length = = 0) return; / / set layer this.areaLayer = new VectorLayer ({source: new VectorSource ({features: [],}),}) / / add layer this.map.addLayer (this.areaLayer); let features = geo.features; for (let i in features) {let areaFeature = {}; if (areaFeature [I] .geometry.type = "MultiPolygon") {areaFeature = new Feature ({geometry: new MultiPolygon (roomures.geometry.coexistates),}) } else if (geometric [I] .geometry.type = = "Polygon") {areaFeature = new Feature ({geometry: new Polygon (geometric [I] .geometry.coexistates),}) } areaFeature.setStyle (new Style ({fill: new Fill ({color: "# 4e98f444"}), stroke: new Stroke ({width: 3, color: [71,137,227,1],}),}); areaFeature.setProperties [I] .properties) This.areaLayer.getSource () addFeature (areaFeature) }, / * initialize the map * / 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,}),}) At this point, the study on "how to use Vue+Openlayer to dynamically load geojson" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!