本文实例为大家分享了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
