vue+openlayers绘制省市边界线


Posted in Vue.js onDecember 24, 2020

本文实例为大家分享了vue+openlayers绘制省市边界线的具体代码,供大家参考,具体内容如下

vue+openlayers绘制省市边界线

1、创建项目

vue init webpack ol_vue

vue+openlayers绘制省市边界线

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue单元格多列合并的实现
Nov 26 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 #Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 #Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 #Vue.js
vue绑定class的三种方法
Dec 24 #Vue.js
全面解析Vue中的$nextTick
Dec 24 #Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 #Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 #Vue.js
You might like
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
php的大小写敏感问题整理
2011/12/29 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
python实时监控cpu小工具
2018/06/21 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
Java基础知识面试要点
2016/07/29 面试题
20岁生日感言
2014/01/13 职场文书
初中生自我评价
2014/02/01 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server