openlayers,地图创建初始化天地图底图添加

最新推荐文章于 2024-08-22 15:41:10 发布

林宇程

最新推荐文章于 2024-08-22 15:41:10 发布

阅读量668

点赞数 2

文章标签：大数据

本文链接：https://blog.csdn.net/weixin_54988062/article/details/125457229

版权

    //ol引入 地图常用的 不用的可自行删除
    import { Map, View } from "ol";
    import XYZ from "ol/source/XYZ";
    import { Vector as VectorSource ,OSM,Stamen} from "ol/source";
    import { Tile as TileLayer, Vector as VectorLayer ,Tile} from "ol/layer";
    import {Icon,Style,Text,Fill,Stroke,} from "ol/style";
        this.vectorSource = new VectorSource({
            features: [],
        });
        this.tianditu = new TileLayer({
        name: "天地图影像图层",
        className: 'stamen',
        source:
          new XYZ({
                url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=0c37299462312e175cab9628d29c7563", //0c37299462312e175cab9628d29c7563为天地图密钥每天限量刷新次数 次数达到会不显示该图层 可去天地图官自行创建
                wrapX: false,
              }),
          }),
        this.VectorLayer = new VectorLayer({
          source: this.vectorSource,
          style:new Style({
            fill: new Fill({
              color: 'rgba(0, 0, 0, 0)',
            }),
            stroke: new Stroke({
              color:'#099afa',
              width:2,
            }),
          }),
          zIndex: 9999,
        }),
        this.map = new Map({
          target: this.mapId,
          layers: [//需要加载的图层
            this.tianditu ,//天地图影像层
            this.VectorLayer
          ],
          view: new View({ //初次加载视角中心点
            center: [12325076.579397999, 2306279.9514405],
            // maxZoom: 17,
            // minZoom: 7,
            zoom: 14,
          }),
        });