openlayer結合天地圖描繪點
其他地圖描點也是一樣的.請去參考官網.
下面是四川天地圖的結合openlayer 開發的API ,裡面有案例:
http://www.scgis.net/scgcmap/help/mapAPIdown.aspx
案列寫的是十分的複雜.我在我的項目中簡化了下.
引入js.css
<head>
<title>天地圖四川要素查詢</title>
<link rel="stylesheet" href="../../static/css/ol.css" type="text/css">
<script src="../../static/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="../../static/js/ol4.1.1_scgis.js" type="text/javascript"></script>
</head>
下面是代碼
<body>
<div id="map" class="map"></div>
<script>
var map;
var styleCache = {};
window.onload = function () {
//定義地圖
map = new ol.scgcMap("map", "", {
token: "",
//天地圖四川服務通路令牌，目前不需要
zoom: ,
//初始化地圖級别
center: [, ] //初始化地圖中心點
});
//定義圖層
var layer = new ol.scgisTileLayer("http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/newtianditudlg/", //地圖服務位址
{
token: "" //天地圖四川服務通路令牌，目前不需要
});
//添加圖層
map.addLayer(layer);
/*
下面是我背景拿的經緯度,和地名格式如下
[{"lat":"32.54","lng":"101.42","name":"阿壩"},{"lat":"31.12","lng":"98.49","name":"白玉"},{"lat":"31.37","lng":"104.27","name":"北川"}]
*/
$.ajax({
type: "post",
cache: false,
async: true,
url: "/findDataToMap",
success: function (data) {
datasearchcallback(data);
},
error: function (err) {
}
});
//傳回處理
function datasearchcallback(json) {
json = eval(json);
var vectorsource = new ol.source.Vector({});
for (var i in json) {
var fea = json[i];
var geometrypt = new ol.geom.Point([fea.lng, fea.lat]);
feature = new ol.Feature({geometry: geometrypt, name: fea.name});
vectorsource.addFeature(feature);
// }
}
var datasearchVectorLayer = new ol.layer.Vector({
source: vectorsource,
style: getStyle
});
map.addLayer(datasearchVectorLayer);
}
//樣式
function getStyle(feature, resolution) {
// var text = resolution < 0.0054931640625 ? feature.get('name') : ''; //根據分辨率控制文字顯示級别
var text = feature.get('name');
if (!styleCache[text]) {
styleCache[text] = [
new ol.style.Style({
image: new ol.style.Icon({
src: '../../static/img/marker.png'
}),
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
text: text,
fill: new ol.style.Fill({
color: '#DC143C'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width:
})
})
})];
}
return styleCache[text];
}
}
</script>
</body>
</html>
最後上圖
![how to design a 2D game map?[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)