openlayers+vue 加载geojson数据

最新推荐文章于 2024-03-09 17:15:42 发布

-錦墨。

最新推荐文章于 2024-03-09 17:15:42 发布

阅读量1.2k

点赞数

分类专栏： Openlayers+Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_43405921/article/details/121785053

版权

Openlayers+Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

基础行政界线数据网站（可以下载）：阿里云数据可视化平台

加载在线资源需要安装axios： npm install axios

<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import OSM from "ol/source/OSM";
import VectorSource from "ol/source/Vector";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import { Style, Stroke } from "ol/style";
import * as Format from "ol/format";
import anhui from "../../../static/geojson/anhui.json";
export default {
  data() {
    return {
      map: null,
      view: null,
      layers: null,
      mapCenter: [117.35398140997644, 31.92075208871266],
      mapZoom: 7.9,
      boundarySource: null,
      boundaryLayer: null,
    };
  },
  mounted() {
    let osm = new TileLayer({
      source: new OSM(),
    });
    this.layers = [osm];
    this.view = new View({
      center: this.mapCenter,
      projection: "EPSG:4326",
      zoom: this.mapZoom,
    });
    this.map = new Map({
      target: "map",
      layers: this.layers,
      view: this.view,
    });
    
	//1.加载项目中geojson数据
    this.boundarySource = new VectorSource({
      features: new Format.GeoJSON().readFeatures(anhui),
    });
    this.boundaryLayer = new VectorLayer({
      source: this.boundarySource,
      style: new Style({
        stroke: new Stroke({//面的样式
          width: 3,
          color: "#0f9ce2",
        }),
        image: new Circle({//点的样式
          radius: 10,
          stroke: new Stroke({
            color: "#fff",
          }),
          fill: new Fill({
            color: "#3399CC",
          }),
        }),
      }),
    });
    this.map.addLayer(this.boundaryLayer);

	//2.加载在线资源
	//在线资源地址需要配置跨域代理
	axios.get("/map/data/anhui.json").then((res) => {
      //如上加载
    });
  },
};
</script>

//geojson数据格式如下
{
  "type": "GeometryCollection",
  "geometries": [
    {"type": "Point","coordinates": [117.2597825704957, 31.817722108030615],"properties": {"ID":1,"MC": "合肥"}},//点
    {"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[117.032273,31.256607],...,[117.032273,31.256607]]]]}}//面
  ]
}