ol叠加矢量图层

原创

已于 2022-12-28 21:23:49 修改 · 266 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-12-18 07:16:04 首次发布

<template>
  <div id="map" style=" width:1080px;height:700px; background-color: gray;"></div>
  <div id="info">&nbsp;</div>
</template>

<script>
import GeoJSON from "ol/format/GeoJSON";
import Map from "ol/Map";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import View from "ol/View";
import { Fill, Stroke, Style } from "ol/style";
import XYZ from "ol/source/XYZ";
import TileLayer from "ol/layer/Tile";
import { useMessage } from 'naive-ui';

export default {
  components: {},
  data() {
    return {
      map: null,
      featureOverlay: null,
      selFeature: null,
      url:
        "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
    };
  },
  mounted() {
    let style = new Style({
      fill: new Fill({
        color: "#eeeeee",
      }),
    });

    //数据图层：
    let vectorLayer = new VectorL