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: '<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>

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

时间: 2020-12-24

vue-openlayers实现地图坐标弹框效果

本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码,供大家参考,具体内容如下 openlayers 这个效果是点击地图,弹出坐标信息. 点击地图边缘时,底图会跟着移动,使弹窗能完整显示出来. <template> <div class="vm"> <h2 class="h-title">弹窗 popup</h2> <div id="map" class="ma

vue使用openlayers实现移动点动画

本文实例为大家分享了vue使用openlayers实现移动点动画的具体代码,供大家参考,具体内容如下 做项目时,本来打算仿照官网的Example中动画制作,引入vue中后,发现它引用的库函数一直报错,最后我去vue中安装的依赖库中去查找这个函数,果然没有.也就是说官方例子使用的库和我安装的OL库存在一定差异. 后来我还是用笨方法去解决了,最终效果如下: 总体思路是将移动目标实例一个Overlay对象,然后将如图5个经纬度点没两点之间分割成多个(200个),之后通过定时器不断setPositon.

Vue+Openlayers自定义轨迹动画

本文实例为大家分享了Vue+Openlayers实现轨迹动画的具体代码,供大家参考,具体内容如下 <template> <div class="map-warp"> <h3> <a href="https://openlayers.org/en/latest/examples/feature-move-animation.html?q=polyline" target="_bank" >Openla

vue项目中openlayers绘制行政区划

vue项目中openlayers画行政区划(区域范围),供大家参考,具体内容如下 原理 在地图上画需要的范围,实际上就是在地图上打上一圈点,然后依次将这些点用线连接,就形成了范围 引用相应的ol模块 import VectorLayer from 'ol/layer/Vector' import VectorSource from 'ol/source/Vector' import { Map, View, Feature } from 'ol' import { Style, Icon, St

在vue项目中引入highcharts图表的方法(详解)

npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

vue项目中使用bpmn为节点添加颜色的方法

内容概述 bpmn是比较方便的绘制流程图的插件,官方demo https://github.com/bpmn-io/bpmn-js-examples 本文主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下. 前情提要 上文我们已经实现了在外部更改节点名.此时又有新玩法:在流程图中,根据节点状态为其标记不同颜色.例如:已完成:黄色,正在进行:绿色,本次我们通过两种方式来实现该需求.效果: 方式1:modeling.setColo

vue项目中使用bpmn-自定义platter的示例代码

内容概述 本系列"vue项目中使用bpmn-xxxx"分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下.如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文 前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我

vue项目中使用axios上传图片等文件操作

axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios

详解如何使用webpack在vue项目中写jsx语法

本文介绍了如何使用webpack在vue项目中写jsx语法,分享给大家,具体如下: 我们知道Vue 2.0中对虚拟DOM的支持.我们可以通过JavaScript动态的创建元素,而不用在template中写HTML代码.虚拟DOM最终将被渲染为真正的DOM. data: { msg: 'Hello world' }, render (h) { return h( 'div', { attrs: { id: 'my-id' }, [ this.msg ] ); } 渲染后的内容为: <div id=

vue项目中v-model父子组件通信的实现详解

前言 我们在vue项目中,经常有这样的需求,父组件绑定v-model,子组件输入更改父组件v-model绑定的数值.很多朋友对这种操作不是很清楚,这需要对v-model有比较深入的了解,今天谈谈v-model. vue的双向数据绑定 v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相

在vue项目中安装使用Mint-UI的方法

一.Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性: 使用文档: http://mint-ui.github.io/#!/zh-cn Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的

vue项目中导入swiper插件的方法

版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: npm i swiper@3.4.2 -S 这里一个小知识,查看node包的所有版本号的方法: npm view 包名 versions 组件编写 swiper官方的使用方法分为4个流程: 加载插件 HTML内容 给Swiper定义一个大小 初始化Swiper 我也按照这个流程编写组件: 加载插件

在vue项目中使用Nprogress.js进度条的方法

NProgress.js提供页面加载进度条效果,当页面打开加载时,在页面顶部会出现进度条加载动画.NProgress.js是轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中. Ajaxyy应用程序的细长进度条.灵感来自Google,YouTube和Medium. 在vue中使用nprogress.js 安装 $ bower install --save nprogress $ npm install --save nprogress 在项目中引入 在main.js中引入要使用的npro

如何去除vue项目中的#及其ie9兼容性

一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'menu', component: menu, children: [ { path: 'organization', component: organization, children: [ { path: