openlayers6基础使用
基础地图
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础地图展示title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.8.1/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.8.1/build/ol.js">script>
<style>
html,body{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
#mapBox{
width: 100vw;
height: 100vh;
background-color: antiquewhite;
}
style>
head>
<body>
<div id="mapBox">div>
<script>
const map=new ol.Map({
target:"mapBox",
layers:[
new ol.layer.Tile({source:new ol.source.OSM()})
],
view:new ol.View({
projection:"EPSG:4326",
// center: ol.proj.fromLonLat([120.13989, 30.27662]),
center:[120.13989, 30.27662],
zoom: 11,
minZoom:10,
maxZoom:13
})
})
script>
body>
html>
添加图标
var areaArr = [{ name: "江干区", lng: 120.17999,lat:30.22757 }, { name: "滨江区", lng: 120.20, lat: 30.20 }, { name:"上城区",lng:120.17,lat:30.25 },{ name:"下城区",lng:120.17,lat:30.28 },{ name:"拱墅区",lng:120.13,lat:30.32 },{ name:"西湖区",lng:120.13,lat:30.27 },{ name:"萧山区",lng:120.27,lat:30.17 } ] var layer = new ol.layer.Vector({ //初始化矢量图形 ，放图标 source: new ol.source.Vector() }) const map = new ol.Map({ target: "mapBox", layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), layer ], view: new ol.View({ projection:"EPSG:4326", center:[120.13989, 30.27662], zoom: 11, minZoom:10, maxZoom:13 }) }) areaArr.forEach(item => { var marker = new ol.Feature({ type: "icon", geometry: new ol.geom.Point([item.lng, item.lat]), // img: "./images/location.png" }) marker.setStyle(new ol.style.Style({ image:new ol.style.Icon({ src:"./images/river.png",//如果在vue中使用require("./images/river.png") scale:0.1 }) })) layer.getSource().addFeature(marker) })
效果预览
添加标注
areaArr.forEach(item => { var marker = new ol.Feature({ type: "icon", geometry: new ol.geom.Point([item.lng, item.lat]), // img: "./images/location.png" }) marker.setStyle(new ol.style.Style({ image:new ol.style.Icon({ src:"./images/river.png", scale:0.1, anchor:[10,18], anchorOrigin:"top-left", anchorXUnits:"pixels", anchorYUnits:"pixels", offsetOrigin:"bottom-left" }), text:new ol.style.Text({ textAlign:"center", textBaseLine:"middle", text:item.name, offsetY:-15, offsetX:10, fill:new ol.style.Fill({ color:"#000" }), backgroundFill:new ol.style.Fill({ color:"#fff" }), padding:[5,3,2,5] }), zIndex:88 })) layer.getSource().addFeature(marker) })
效果展示
持续记录……