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>
|