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 + el-form 实现的多层循环表单验证
Nov 25 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
Vue实现简易购物车页面
2020/12/30 Vue.js
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
python实现自动打卡的示例代码
2020/10/10 Python
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
英语自荐信范文
2013/12/11 职场文书
主题婚礼策划方案
2014/02/10 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
现场活动策划方案
2014/08/22 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
Redis命令处理过程源码解析
2022/02/12 Redis