vue+openlayers绘制省市边界线

这篇文章主要为大家详细介绍了vue+openlayers绘制省市边界线,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

4、api

文件目录:static/js/api.js

 const host = 'https://api.obtdata.com/'; export default { 'searchcity': host + 'standard/searchcity' }

5、实现代码

 

以上就是vue+openlayers绘制省市边界线的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » Vue.js 教程