vue使用openlayers描边中国地图

vue使用openlayers描边中国地图
效果图：

数据源来自：http://datav.aliyun.com/tools/atlas/#&lat=30.37018632615852&lng=106.68898666525287&zoom=3.5
china.json:

代码
index.vue:

<template><div id="app"><div id="Map" ref="map"></div></div>
</template>
<script>
import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import XYZ from "ol/source/XYZ";
import { Map, View, Feature } from "ol";
import { Style, Stroke, Fill } from "ol/style";
import { Polygon, MultiPolygon } from "ol/geom";
import { defaults as defaultControls } from "ol/control";
import { fromLonLat } from "ol/proj";import areaGeo from "@/static/china.json";
export default {data() {return {map: null,areaLayer: null};},methods: {/*** 初始化地图*/initMap() {this.map = new Map({target: "Map",controls: defaultControls({zoom: true}).extend([]),layers: [new TileLayer({source: new XYZ({url:"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"})},{ zoomOffset: 1 })],view: new View({center: fromLonLat([108.522097, 37.272848]),zoom: 4.7,maxZoom: 19,minZoom: 4})});},/*** 设置区域*/addArea(geo = []) {if (geo.length == 0) return false;let areaFeature = null;// 设置图层this.areaLayer = new VectorLayer({source: new VectorSource({features: []})});// 添加图层this.map.addLayer(this.areaLayer);geo.forEach(g => {let lineData = g.features[0];if (lineData.geometry.type == "MultiPolygon") {areaFeature = new Feature({geometry: new MultiPolygon(lineData.geometry.coordinates).transform("EPSG:4326", "EPSG:3857")});} else if (lineData.geometry.type == "Polygon") {areaFeature = new Feature({geometry: new Polygon(lineData.geometry.coordinates).transform("EPSG:4326", "EPSG:3857")});}});areaFeature.setStyle(new Style({fill: new Fill({ color: "#4e98f444" }),stroke: new Stroke({width: 3,color: [71, 137, 227, 1]})}));this.areaLayer.getSource().addFeatures([areaFeature]);},},mounted() {this.initMap();//初始化地图方法this.addArea(areaGeo);//添加区域图层方法}
};
</script>
<style lang="scss" scoped>#Map{width: 100vw;height:100vh;}
</style>

vue使用openlayers描边中国地图相关推荐

VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
vue中展示echarts中国地图
在vue项目中展示中国地图可以使用echarts库,根据配置数据区分不同颜色展示地图等功能. 先看效果一.安装Echarts npm install echarts@4.9.0 --save 我这里 ...
vue - vue使用echarts实现中国地图和点击省份进行查看
文章目录 1,实现的效果和功能 2,安装ECharts 3,main.js里面引入echarts 4,实现如下 5,遇到的问题 6,用到的模拟数据 1,实现的效果和功能 vue使用echarts实现中 ...
vue中使用echarts中国地图
一效果图二上代码封装的完整的地图组件,里面注释了很多就不解释了 <template><div class="mapContent"><div r ...
echarts+vue实现简单的中国地图且数据下钻（简洁适合小白版）
首先,在实现地图之前,需要实现地图的json文件(包含各省份和整个中国地图),文件可从阿里云可视化数据平台下载网址:http://datav.aliyun.com/portal/school/atla ...
vue集成echarts 绘制中国地图
最近项目遇见了需要以中国地图展示的需求了解到 echarts 是一个很好用的图表展示工具 ,但发现官网没有关于中国地图的组件,经过了解,echarts 5.0以上将中国地图去掉了,需要用到chi ...
vue 引入echarts画中国地图 Map china not exists
现象:在vue里用echarts画地图时报错:Map china not exists. 只出现了南海诸岛部分原因:没引入地图数据解决: import 'echarts/map/js/china. ...
vue 引入json地图_vue中echarts引入中国地图的案例
如下所示: mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = d ...
前端jq/vue echarts中国地图的实现
一.jquery项目实现echarts中国地图 1.引入相关资源文件 jquery.echarts 等 <script src="https://cdn.bootcdn.net/aja ...

vue使用openlayers描边中国地图

vue使用openlayers描边中国地图相关推荐

最新文章

热门文章