OpenLayers在线调用天地图并绘制点状符号进行标记
OpenLayers在线调用天地图并绘制点状符号进行标记
在做web开发时，需要用openlayers调用天地图作为底图进行开发，并绘制一些点、线、面图形进行标记。这里提供一个Demo可作为参照（注意相关css与js的引入）。
- 效果预览
- 实现代码
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>Point</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/openlayers/4.6.5/ol.css" type="text/css">
<style>
#map {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
left: 0;
top: 0;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
.half {
min-width: 800px,
padding: 0 10px;
width: 50%;
float: left;
}
.ol-popup {
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -32px;
}
.ol-popup:after,
.ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 31px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 31px;
margin-left: -11px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=a41XdmDBn0KIMe82au2SzLSueNrTAfF1">
</script>
<script src="https://cdn.bootcss.com/openlayers/4.6.5/ol.js"></script>
<script src="./index.js"></script>
<div id="popup" class="ol-popup">
<div id="popup-content"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
var projection = ol.proj.get("EPSG:4326");
var projectionExtent = projection.getExtent();
var res = [
1.40625,
0.703125,
0.3515625,
0.17578125,
0.087890625,
0.0439453125,
0.02197265625,
0.010986328125,
0.0054931640625,
0.00274658203125,
0.001373291015625,
0.0006866455078125,
0.00034332275390625,
0.000171661376953125,
0.0000858306884765625,
0.00004291534423828125,
0.000021457672119140625,
0.000010728836059570312,
0.000005364418029785156,
0.000002682209014892578,
0.000001341104507446289
];
//点数据生成
//创建Feature
var hangzhou = new ol.Feature({
geometry: new ol.geom.Point([120.15, 30.25]),
name: '杭州'
});
var ningbo = new ol.Feature({
geometry: new ol.geom.Point([121.56, 29.86]),
name: '宁波'
});
var wenzhou = new ol.Feature({
geometry: new ol.geom.Point([120.65, 28.01]),
name: '温州'
});
//为Point设置Icon样式
hangzhou.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
color: '#8959A8',
crossOrigin: 'anonymous',
src: 'https://openlayers.org/en/latest/examples/data/dot.png'
}))
}));
ningbo.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
color: '#4271AE',
crossOrigin: 'anonymous',
src: 'https://openlayers.org/en/latest/examples/data/dot.png'
}))
}));
wenzhou.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
color: [113, 140, 0],
crossOrigin: 'anonymous',
src: 'https://openlayers.org/en/latest/examples/data/dot.png'
}))
}));
//数据源
var vectorSource = new ol.source.Vector({
features: [hangzhou, ningbo, wenzhou]
});
//图层
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
//加载地图
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.WMTS({
name: "中国矢量1-4级",
url: "http://t{0-6}.tianditu.com/vec_c/wmts?tk=你的开发key",
layer: "vec",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: res.slice(0, 15),
matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13,
14
]
})
}),
minResolution: 0.00004291534423828125,
maxResolution: 1.40625
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
name: "中国矢量注记1-4级",
url: "http://t{0-6}.tianditu.com/cva_c/wmts?tk=你的开发key",
layer: "cva",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: res.slice(0, 15),
matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13,
14
]
})
}),
minResolution: 0.00004291534423828125,
maxResolution: 1.40625
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
name: "浙江矢量7-20级",
url: "http://srv{0-6}.zjditu.cn/ZJEMAP_2D/wmts",
layer: "TDT_ZJEMAP",
style: "default",
matrixSet: "TileMatrixSet0",
format: "image/png",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: res.slice(7, 21),
matrixIds: [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
20
]
})
}),
minResolution: 0.000001341104507446289,
maxResolution: 0.02197265625
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
name: "浙江矢量注记7-20级",
url: "http://srv{0-6}.zjditu.cn/ZJEMAPANNO_2D/wmts",
layer: "ZJEMAPANNO",
style: "default",
matrixSet: "TileMatrixSet0",
format: "image/png",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: res.slice(7, 21),
matrixIds: [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
20
]
})
}),
minResolution: 0.000001341104507446289,
maxResolution: 0.02197265625
})
],
target: "map",
view: new ol.View({
center: [120.15, 30.25],
projection: projection,
zoom: 8,
maxZoom: 20,
minZoom: 1
})
});
//加载feature图层
map.addLayer(vectorLayer);
/**
* 构成popup的元素.
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
/**
* 添加一个overlay 来把popup锚定到地图上.
*/
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
map.addOverlay(overlay);
/**
*点击icon后显示popup
*/
map.on('click', function (evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature;
});
if (feature) {
var coordinates = feature.getGeometry().getCoordinates();
content.innerHTML = '' + feature.get('name') + '';
overlay.setPosition(coordinates);
} else {
overlay.setPosition(null);
return false;
}
});
map.on('pointermove', function (e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
if (hit) {
map.getTargetElement().style.cursor = 'pointer';
} else {
map.getTargetElement().style.cursor = '';
}
});
function bd09towgs84(lng, lat) {
var mid = coordtransform.bd09togcj02(lng, lat);
return coordtransform.gcj02towgs84(mid[0], mid[1]);
};
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
// alert('您的位置：' + r.point.lng + ',' + r.point.lat);
console.log(r);
console.log(r.point);
var newCoor = bd09towgs84(r.point.lng,r.point.lat);
//创建Feature
var curPosition = new ol.Feature({
// geometry: new ol.geom.Point([newCoor[0], newCoor[1]]),
geometry: new ol.geom.Point([r.point.lng, r.point.lat]),
name: '您的位置'
});
curPosition.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
color: '#FF0000',
crossOrigin: 'anonymous',
src: 'https://openlayers.org/en/latest/examples/data/dot.png'
}))
}));
vectorSource.addFeature(curPosition);
} else {
alert('failed' + this.getStatus());
}
}, {
enableHighAccuracy: true,
SDKLocation:true
})
</script>
</body>
</html>