openlayer基本使用

原创

已于 2023-08-29 09:43:06 修改 · 325 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-08-24 21:30:17 首次发布

本文介绍了如何使用OpenLayers在JavaScript中实现地图初始化，包括离线瓦片的支持，如百度和高德地图的瓦片处理，以及矢量数据的添加、标注、多边形绘制等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引用

import { Map, View } from "ol";

import { Tile as TileLayer, Vector, Image, Tile } from "ol/layer";

import {

OSM,

XYZ,

Vector as sourceVector,

ImageStatic,

TileImage,

} from "ol/source";

import GeoJSON from "ol/format/GeoJSON";

import { Style, Fill, Stroke, Text, Icon, Circle } from "ol/style";

import Feature from "ol/Feature";

import Point from "ol/geom/Point";

import Polygon from "ol/geom/Polygon";

import Overlay from "ol/Overlay";

import Projection from "ol/proj/Projection";

import { addProjection, addCoordinateTransforms } from "ol/proj";

import { Draw } from "ol/interaction";

import TileGrid from "ol/tilegrid/TileGrid";

import { lngLatToMercator, mercatorToLngLat } from "./bd09";

一、地图初始化

let map = new Map({

layers: [

mapLayer,

],

view: new View({

projection: "EPSG:4326", // 4326经纬度 || 5328 屏幕坐标

center: [110.41103, 19.81555], //中心点

zoom: 6,

minZoom: 8,

maxZoom: 12,

}),

target: "mapContainer",

});

二、离线瓦片（WGB84经纬度坐标）

1、常规坐标系瓦片

//tms瓦片（全球）

a.globalLayer = new TileLayer({

source: new XYZ({

url: window.configItem.globalLayer + `{z}/{x}/{-y}.png`,

}),

})

//tms瓦片（河南）

a.HNLayer = new TileLayer({

source: new XYZ({

url: window.configItem.areaLayer + `{z}/{x}/{-y}.png`,

}),

});

2、百度坐标瓦片

//添加百度地图投影 url 瓦片地址

addBmap(url) {

var projBD09 = new Projection({

code: "BD:09",

extent: [-20037726.37, -11708041.66, 20037726.37, 12474104.17],

units: "m",

axisOrientation: "neu",

global: false,

});

addProjection(projBD09);

addCoordinateTransforms(

"EPSG:4326",

"BD:09",

function (coordinate) {

return lngLatToMercator(coordinate);

},

function (coordinate) {