本文實例為大家分享了vue+openlayers繪制省市邊界線的具體代碼，供大家參考，具體內容如下
1、創建項目
vue init webpack ol_vue
2、安裝ol依賴包
npm install ol
3、引入axios
npm install axios --save
文件目錄：src/main.js
import Vue from 'vue'
import router from './router'
import App from './App'
import axios from "axios";
//添加實例屬性：不想污染全局作用域，在原型上定義它們使其在每個 Vue 的實例中可用。prototype向對象添加屬性和方法。
// $ 是在 Vue 所有實例中都可用的屬性的一個簡單約定。
Vue.prototype.$axios = axios
//阻止啟動生產消息。
Vue.config.productionTip = false
//開啟debug模式
//Vue.config.debug = true
//禁用ESLint進行檢測
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
4、api
文件目錄：static/js/api.js
const host = 'https://api.obtdata.com/';
export default {
'searchcity': host + 'standard/searchcity'
}
5、實現代碼
<template>
<div>
<div id="map"></div>
</div>
</template>
<script>
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import GeoJSON from 'ol/format/geoJson'
import Feature from 'ol/Feature'
import vectorLayer from 'ol/layer/Vector'
import SourceVector from 'ol/source/Vector'
import {Style,Stroke} from 'ol/style'
import OSM from 'ol/source/OSM'
import {fromLonLat} from 'ol/proj.js'
import api from '../static/js/api'
export default {
name: "app",
data () {
return {
map: null,
source:null,
resData:null,
vector: null
}
},
mounted () {
//ol.source.Vector，提供矢量圖層數據
var source = new SourceVector({
wrapX: false,
code: 'EPSG:4326',
});
//ol.layer.Vector用于顯示在客戶端渲染的矢量數據。
this.vector = new vectorLayer({
source: source,
});
this.map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
}),
this.vector
],
view: new View({
center: fromLonLat([110.850881285943,30.1253920380122]),//湖南省
zoom: 5
})
});
this.searchCity()
},
methods:{
searchCity() {
//axios獲取數據
this.$axios
.get(api.searchcity, {
params: {
code: '43'
}
})
.then((res) => {
this.resData = res.data.geom;
//console.log(this.resData)
//ol.format.GeoJSON：以GeoJSON格式讀取和寫入數據
//readGeometry （source，opt_options）閱讀幾何圖形
//dataProjection投影我們正在閱讀的數據
//featureProjection投影格式閱讀器創建的要素幾何
var geom=(new GeoJSON()).readGeometry(this.resData,{
dataProjection:'EPSG:4326',
featureProjection:'EPSG:3857'
});
//ol.Feature具有幾何和其他屬性屬性的地理要素的矢量對象
var feature=new Feature(geom);
//ol.source.Vector提供矢量圖層的要素源
//features特征。如果提供為module:ol/Collection，則源和集合中的功能將保持同步。
//wrapX水平包裹世界。對于橫跨-180°和180°子午線的矢量編輯以正常工作，應將其設置為false。
var source=new SourceVector({
features:[feature],
wrapX:false
});
//getFeatures以隨機順序獲取源上的所有功能。
//getGeometry獲取要素的默認幾何體。
var polygons=(source.getFeatures()[0].getGeometry());
var size=(this.map.getSize());
//addFeature向源添加單個功能。
this.vector.getSource().addFeature(feature);
//fit（geometryOrExtent，opt_options）根據給定的地圖大小和邊框擬合給定的幾何或范圍。
this.map.getView().fit(polygons,size);
})
}
}
}
</script>
<style scoped>
</style>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_39520640/article/details/96479717
