250 lines
10 KiB
Plaintext
250 lines
10 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LocationSelect.aspx.cs" Inherits="FineUIPro.Web.ProjectData.LocationSelect" %>
|
||
|
||
<!DOCTYPE html>
|
||
<style>
|
||
body,
|
||
html,
|
||
#container {
|
||
overflow: hidden;
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
font-family: "微软雅黑";
|
||
}
|
||
</style>
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
<head runat="server">
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
<title></title>
|
||
<link href="../res/css/common.css" rel="stylesheet" type="text/css" />
|
||
</head>
|
||
<body>
|
||
<form id="form1" runat="server">
|
||
<f:PageManager ID="PageManager1" AutoSizePanelID="RegionPanel1" runat="server" />
|
||
<f:RegionPanel ID="RegionPanel1" ShowBorder="false" runat="server" Margin="5px">
|
||
<Regions>
|
||
<f:Region ID="Region2" ShowBorder="false" ShowHeader="false" Position="Center" Layout="VBox"
|
||
BoxConfigAlign="Stretch" BoxConfigPosition="Left" runat="server" BodyPadding="0 5 0 0">
|
||
<Items>
|
||
<f:ContentPanel ID="ContentPanel1" CssClass="bodyregion" ShowBorder="false" ShowHeader="false" runat="server" Height="500px">
|
||
<div id="map" style="width:835px;height:500px"></div>
|
||
</f:ContentPanel>
|
||
<f:Form ID="SimpleForm1" ShowBorder="false" ShowHeader="false" AutoScroll="true"
|
||
BodyPadding="10px" runat="server" RedStarPosition="BeforeText" LabelAlign="Left">
|
||
<Toolbars>
|
||
<f:Toolbar ID="Toolbar1" Position="Bottom" ToolbarAlign="Right" runat="server">
|
||
<Items>
|
||
<f:ToolbarFill ID="ToolbarFill1" runat="server">
|
||
</f:ToolbarFill>
|
||
<f:Button ID="btnSave" ToolTip="保存" Icon="SystemSave" runat="server" Text=""
|
||
OnClick="btnSave_Click">
|
||
</f:Button>
|
||
</Items>
|
||
</f:Toolbar>
|
||
</Toolbars>
|
||
<Rows>
|
||
<f:FormRow>
|
||
<Items>
|
||
<f:TextBox ID="txtLoc" runat="server" Label="坐标" Required="true" LabelWidth="60px" ShowRedStar="true" FocusOnPageLoad="true" ></f:TextBox>
|
||
</Items>
|
||
</f:FormRow>
|
||
</Rows>
|
||
</f:Form>
|
||
</Items>
|
||
</f:Region>
|
||
</Regions>
|
||
</f:RegionPanel>
|
||
</form>
|
||
</body>
|
||
</html>
|
||
<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%>"
|
||
|
||
/*定义百度投影，这是实现无偏移加载百度地图离线瓦片核心所在。
|
||
网上很多相关资料在用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
|
||
});
|
||
|
||
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];
|
||
var projectCode = '<%=ProjectCode%>'
|
||
return '../../File/Map/' + projectCode + '/tiles/' + z + '/tile-' + x + '_' + y + '.png';
|
||
//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];
|
||
//实例化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);
|
||
// }
|
||
|
||
});
|
||
|
||
</script> |