提交代码
This commit is contained in:
@@ -57,44 +57,191 @@
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
<script src="https://api.map.baidu.com/api?v=2.0&ak=24y6PiwMI7AqPQ3L4SE253mWKntWR1Nq"></script>
|
||||
<link type="text/css" href="../../res/ol/ol.css" rel="stylesheet"/>
|
||||
<script type="text/javascript" src="../../res/ol/ol.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="../../res/ol/bd09.js" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
F.ready(function () {
|
||||
var txtLoc = "<%=txtLoc.ClientID%>"
|
||||
var tileLayer = new BMap.TileLayer();
|
||||
tileLayer.getTilesUrl = function (tileCoord, zoom) {
|
||||
var x = tileCoord.x;
|
||||
var y = tileCoord.y;
|
||||
return '../File/Map/SD1-PC-2023-001/tiles/' + zoom + '/tile-' + x + '_' + y + '.png';
|
||||
}
|
||||
var MyMap = new BMap.MapType('MyMap', tileLayer, { minZoom: 3, maxZoom: 8 });
|
||||
var map = new BMap.Map('map', { mapType: MyMap });
|
||||
map.addControl(new BMap.NavigationControl( ));
|
||||
map.centerAndZoom(new BMap.Point(0, 0), 5);
|
||||
//map.addEventListener('click', function (e) {
|
||||
// alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
|
||||
// // var marker1 = new BMap.Marker(new BMap.Point(e.latlng.lng, e.latlng.lat));
|
||||
//// 在地图上添加点标记
|
||||
//map.addOverlay(marker1);
|
||||
|
||||
//});
|
||||
/*定义百度投影，这是实现无偏移加载百度地图离线瓦片核心所在。
|
||||
网上很多相关资料在用OpenLayers加载百度地图离线瓦片时都认为投影就是EPSG:3857(也就是Web墨卡托投影)。
|
||||
事实上这是错误的，因此无法做到无偏移加载。
|
||||
百度地图有自己独特的投影体系，必须在OpenLayers中自定义百度投影，才能实现无偏移加载。
|
||||
百度投影实现的核心文件为bd09.js，在迈高图官网可以找到查看这个文件。*/
|
||||
var projBD09 = new ol.proj.Projection({
|
||||
code: 'BD:09',
|
||||
extent: [-20037726.37, -11708041.66, 20037726.37, 12474104.17],
|
||||
units: 'm',
|
||||
axisOrientation: 'neu',
|
||||
global: false
|
||||
});
|
||||
|
||||
map.addEventListener("click", function (e) {
|
||||
map.clearOverlays();
|
||||
var marker1 = new BMap.Marker(new BMap.Point(e.Dg.lng, e.Dg.lat));
|
||||
//// 在地图上添加点标记
|
||||
map.addOverlay(marker1);
|
||||
F( txtLoc).setValue(e.Dg.lng+';'+e.Dg.lat)
|
||||
}
|
||||
ol.proj.addProjection(projBD09);
|
||||
ol.proj.addCoordinateTransforms("EPSG:4326", "BD:09",
|
||||
function (coordinate) {
|
||||
return lngLatToMercator(coordinate);
|
||||
},
|
||||
function (coordinate) {
|
||||
return mercatorToLngLat(coordinate);
|
||||
}
|
||||
);
|
||||
|
||||
/*定义百度地图分辨率与瓦片网格*/
|
||||
var resolutions = [];
|
||||
for (var i = 0; i <= 18; i++) {
|
||||
resolutions[i] = Math.pow(2, 18 - i);
|
||||
}
|
||||
|
||||
var tilegrid = new ol.tilegrid.TileGrid({
|
||||
origin: [0, 0],
|
||||
resolutions: resolutions
|
||||
});
|
||||
|
||||
/*加载百度地图离线瓦片不能用ol.source.XYZ，ol.source.XYZ针对谷歌地图（注意：是谷歌地图）而设计，
|
||||
而百度地图与谷歌地图使用了不同的投影、分辨率和瓦片网格。因此这里使用ol.source.TileImage来自行指定
|
||||
投影、分辨率、瓦片网格。*/
|
||||
var source = new ol.source.TileImage({
|
||||
projection: "BD:09",
|
||||
tileGrid: tilegrid,
|
||||
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
|
||||
//openlayer5的版本
|
||||
var z = tileCoord[0];
|
||||
var x = tileCoord[1];
|
||||
var y = tileCoord[2];
|
||||
return '../../File/Map/SD1-PC-2023-001/tiles/' + z + '/tile-' + x + '_' + y + '.png';
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
var mapLayer = new ol.layer.Tile({
|
||||
source: source
|
||||
});
|
||||
|
||||
let map = new ol.Map({
|
||||
layers: [
|
||||
mapLayer
|
||||
],
|
||||
view: new ol.View({
|
||||
center: ol.proj.transform([5, 5], 'EPSG:4326', 'BD:09'),
|
||||
projection: 'BD:09',
|
||||
zoom: 5
|
||||
}),
|
||||
target: 'map'
|
||||
});
|
||||
|
||||
|
||||
|
||||
var marker =null ;
|
||||
var markerLayer =null;
|
||||
var createLabelStyle = function (feature) {
|
||||
return new ol.style.Style({
|
||||
/**{olx.style.IconOptions}类型*/
|
||||
image: new ol.style.Icon({
|
||||
anchor: [0.5, 60],
|
||||
anchorOrigin: 'top-right',
|
||||
anchorXUnits: 'fraction',
|
||||
anchorYUnits: 'pixels',
|
||||
offsetOrigin: 'top-right',
|
||||
// offset:[0,10],
|
||||
//图标缩放比例
|
||||
// scale:0.5,
|
||||
//透明度
|
||||
//opacity: 0.75,
|
||||
//图标的url
|
||||
src: '../File/Image/loc.png',
|
||||
})
|
||||
})
|
||||
}
|
||||
map.on('click', function (evt) {
|
||||
//map.clearOverlays();
|
||||
if (marker != null && markerLayer != null) {
|
||||
markerLayer.getSource().removeFeature(marker);
|
||||
}
|
||||
var coordinate = evt.coordinate; //鼠标单击点的坐标
|
||||
//新建一个要素ol.Feature
|
||||
|
||||
|
||||
//实例化Vector要素，通过矢量图层添加到地图容器中
|
||||
var iconFeature = new ol.Feature({
|
||||
geometry: new ol.geom.Point(coordinate),
|
||||
|
||||
})
|
||||
marker = iconFeature;
|
||||
iconFeature.setStyle(createLabelStyle(iconFeature))
|
||||
//矢量标注的数据源
|
||||
var vectorSource = new ol.source.Vector({
|
||||
features: [iconFeature],
|
||||
})
|
||||
//矢量标注图层
|
||||
var vectorLayer = new ol.layer.Vector({
|
||||
source: vectorSource,
|
||||
})
|
||||
markerLayer = vectorLayer;
|
||||
map.addLayer(vectorLayer)
|
||||
|
||||
F(txtLoc).setValue(coordinate[0] + ';' + coordinate[1])
|
||||
|
||||
|
||||
|
||||
});
|
||||
var txtloc = F(txtLoc).getValue();
|
||||
|
||||
if (txtloc != null && txtloc != '') {
|
||||
var lng = txtloc.split(";")[0];
|
||||
var lat = txtloc.split(";")[1];
|
||||
var marker1 = new BMap.Marker(new BMap.Point(lng, lat));
|
||||
//// 在地图上添加点标记
|
||||
map.addOverlay(marker1);
|
||||
}
|
||||
var lng = txtloc.split(";")[0];
|
||||
var lat = txtloc.split(";")[1];
|
||||
//实例化Vector要素，通过矢量图层添加到地图容器中
|
||||
var iconFeature = new ol.Feature({
|
||||
geometry: new ol.geom.Point([Number(lng), Number(lat)]),
|
||||
|
||||
})
|
||||
marker = iconFeature;
|
||||
iconFeature.setStyle(createLabelStyle(iconFeature))
|
||||
//矢量标注的数据源
|
||||
var vectorSource = new ol.source.Vector({
|
||||
features: [iconFeature],
|
||||
})
|
||||
//矢量标注图层
|
||||
var vectorLayer = new ol.layer.Vector({
|
||||
source: vectorSource,
|
||||
})
|
||||
markerLayer = vectorLayer;
|
||||
map.addLayer(vectorLayer);
|
||||
}
|
||||
//var tileLayer = new BMap.TileLayer();
|
||||
//tileLayer.getTilesUrl = function (tileCoord, zoom) {
|
||||
// var x = tileCoord.x;
|
||||
// var y = tileCoord.y;
|
||||
// return '../File/Map/SD1-PC-2023-001/tiles/' + zoom + '/tile-' + x + '_' + y + '.png';
|
||||
//}
|
||||
//var MyMap = new BMap.MapType('MyMap', tileLayer, { minZoom: 3, maxZoom: 8 });
|
||||
//var map = new BMap.Map('map', { mapType: MyMap });
|
||||
//map.addControl(new BMap.NavigationControl( ));
|
||||
//map.centerAndZoom(new BMap.Point(0, 0), 5);
|
||||
////map.addEventListener('click', function (e) {
|
||||
//// alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
|
||||
//// // var marker1 = new BMap.Marker(new BMap.Point(e.latlng.lng, e.latlng.lat));
|
||||
////// 在地图上添加点标记
|
||||
////map.addOverlay(marker1);
|
||||
|
||||
////});
|
||||
|
||||
//map.addEventListener("click", function (e) {
|
||||
// map.clearOverlays();
|
||||
// var marker1 = new BMap.Marker(new BMap.Point(e.Dg.lng, e.Dg.lat));
|
||||
// //// 在地图上添加点标记
|
||||
// map.addOverlay(marker1);
|
||||
// F( txtLoc).setValue(e.Dg.lng+';'+e.Dg.lat)
|
||||
//}
|
||||
//);
|
||||
//var txtloc = F(txtLoc).getValue();
|
||||
//if (txtloc != null && txtloc != '') {
|
||||
// var lng = txtloc.split(";")[0];
|
||||
// var lat = txtloc.split(";")[1];
|
||||
// var marker1 = new BMap.Marker(new BMap.Point(lng, lat));
|
||||
// //// 在地图上添加点标记
|
||||
// map.addOverlay(marker1);
|
||||
// }
|
||||
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user