openLayers新手入门一：新建地图

L-L-L3

已于 2022-12-02 11:02:08 修改

阅读量288

点赞数

分类专栏： openLayers 文章标签： vue.js

于 2022-12-02 10:23:00 首次发布

本文链接：https://blog.csdn.net/qq_42323429/article/details/128143702

版权

openLayers 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一：

npm install ol

二：使用：

import Map from "ol/Map";

import View from "ol/View";

import TileLayer from "ol/layer/Tile";

import * as olProj from "ol/proj";

import XYZ from "ol/source/XYZ";

import "ol/ol.css";

this.myMap = new Map({

        target: "map", // dom元素的id

        layers: [

          new TileLayer({

            source: new XYZ({

            // 官网中的OSM地图不显示，这里用谷歌地图

              url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",

            }),

          }),

        ],

        view: new View({

        // 投影为墨卡托格式，经纬度需要转换

          center: olProj.fromLonLat([116.3, 39.9]),

          zoom: 12,

        }),

      });