地图开发小功能

最新推荐文章于 2024-03-05 14:23:06 发布

唯别lyy

最新推荐文章于 2024-03-05 14:23:06 发布

阅读量778

点赞数

分类专栏：帮助记忆 GIS MAP 文章标签： javascript

本文链接：https://blog.csdn.net/lyy19901101/article/details/125439095

版权

帮助记忆同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

GIS

1 篇文章 0 订阅

订阅专栏

MAP

1 篇文章 0 订阅

订阅专栏

1、地图测距、测面

// 测距
var toolMarkerList=[];
Map.prototype.beginDis=function(){
var that=this;
var pointOption = {
radius: 5,
color: "red",
weight:'0.9',
fillOpacity: 0
};
var lineOption={
color:"red",
weight:1
}
var pointList=[];
this.map.on('click',function(e){
addMarker(e);
}).on('dblclick',function(e){
addMarker(e);
that.map.off('click');
that.map.off('dblclick');
});

var sum=0;
function addMarker(e){
var marker=L.circleMarker(e.latlng,pointOption);
toolMarkerList.push(marker);
marker.addTo(that.map);
pointList.push([e.latlng.lat,e.latlng.lng]);
if(pointList.length==1){
marker.bindTooltip("起点",{permanent:true,offset:L.point(10,0),className:'leaflet-label'}).openTooltip();
}
else{
var line=L.polyline(pointList,lineOption);
toolMarkerList.push(line);
line.addTo(that.map);

var first=pointList[pointList.length-1];
var second=pointList[pointList.length-2];
sum+=parseInt(Math.sqrt((first[0]-second[0])*(first[0]-second[0])+(first[1]-second[1])*(first[1]-second[1])));
marker.bindTooltip(sum+"米",{permanent:true,offset:L.point(10,0),className:'leaflet-label'}).openTooltip();
}
}
}

// 测面
Map.prototype.beginArea=function(){
var that=this;
var pointOption = {
radius: 5,
color: "red",
weight:'0.9',
fillOpacity: 0
};
var lineOption={
color:"red",
weight:1
}
var polygonOption={
color:"red",
weight:1,
fillColor:'gray',
fillOpacity:'0.5'
}
var areaMarker=new L.polygon([]);
toolMarkerList.push(areaMarker);
var pointList=[];
this.map.on('click',function(e){
addMarker(e);
}).on('dblclick',function(e){
addMarker(e);
that.map.off('click');
that.map.off('dblclick');
});

function addMarker(e){
var marker=L.circleMarker(e.latlng,pointOption);
toolMarkerList.push(marker);
marker.addTo(that.map);
pointList.push([e.latlng.lat,e.latlng.lng]);
if(pointList.length==2){
var line=L.polyline(pointList,lineOption);
toolMarkerList.push(line);
line.addTo(that.map);
}else if(pointList.length>2){
areaMarker.setLatLngs(pointList);
areaMarker.setStyle(polygonOption);
areaMarker.addTo(that.map);
}

if(e.type=="dblclick"){
var area=CalculatePolygonArea(pointList);
marker.bindTooltip(parseInt(area)+"平方米",{permanent:true,offset:L.point(10,0)}).openTooltip();
}
}
}

// 清除标记
Map.prototype.clearToolMarker=function(){
var map=this.map;
toolMarkerList.forEach(function(item,index){
map.removeLayer(item);
});
map.off('click');
map.off('dblclick');
}

<div id="layerbox_item">
<div class="show-list">
<a class="layer_item item" href="javascript:void(0)" id="mdis-tool">
<span class="icon">
<i class="iconfont icon-mdis"></i>
</span>
<span class="name">测距</span>
</a>
<a class="layer_item item" href="javascript:void(0)" id="marea-tool">
<span class="icon">
<i class="iconfont icon-marea"></i>
</span>
<span class="name">测面</span>
</a>
<a class="layer_item item" href="javascript:void(0)" id="clear-tool">
<span class="icon">
<i class="iconfont icon-clear"></i>
</span>
<span class="name">清除</span>
</a>
</div>
</div>

// 工具条
$("#mdis-tool").click(function(){
event.stopPropagation();
map.beginDis();
});

$("#marea-tool").click(function(){
event.stopPropagation();
map.beginArea();
});

$("#clear-tool").click(function(){
event.stopPropagation();
map.clearToolMarker();
});

/*工具条*/
#layerbox_item{
padding: 14px 0 13px;
background: #fff;
border-radius: 3px;
height: 44px;
font-size: 12px;
line-height: 1.5;
color: #565656;
word-wrap: break-word;
position: absolute;
top:20px;right: 120px;
z-index: 999;
}

#layerbox_item .show-list{
position: relative;
}

#layerbox_item .item:first-child{
border-left: 0;
}

#layerbox_item .item{
float: left;
height: 18px;
padding: 0 12px;
border-left: 1px dashed #dbdee2;
vertical-align: middle;
cursor: pointer;
overflow: visible;
zoom:1;
color: #5f6477;
}

#layerbox_item .item .icon{
width: 20px;
height: 18px;
line-height: 18px;
margin-right: 6px;
}

#layerbox_item .item .name{
line-height: 18px;
}

#layerbox_item .item span{
display: inline-block;
vertical-align: middle;
float: left;
}

#layerbox_item .satellite .icon{
background-position: 4px 1px;
}

#layerbox_item .item .icon .iconfont{
width: 20px;
height: 18px;
line-height: 18px;
font-size: 18px;
}

@font-face{
font-family:iconfont;
src:url(fonts/font_wp1i0nax5vhx5hfr.eot);
src:url(fonts/font_wp1i0nax5vhx5hfr.eot) format('embedded-opentype'),url(fonts/font_wp1i0nax5vhx5hfr.ttf) format('truetype'),url(fonts/font_wp1i0nax5vhx5hfr.svg) format('svg')
}
.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.icon-mdis:before{
content:"\e621";
}

.icon-marea:before{
content:"\e62f";
}

.icon-label:before{
content: "\e606";
}

.icon-capture:before{
content:"\eb26";
}

.icon-clear:before{
content: "\e617";
}

.icon-star:before{
content:'\e600';
}

#layerbox_item .item:hover{
opacity:.6
}

#layerbox_item .item.active{
color:#009cf9;
}

2、自定义画面

// 自定义勾画面状
function draw_areaoptions(map){
var points = [], geometry = []
var lines = new L.polyline([])
var tempLines = new L.polyline([], { dashArray: 5 })

map.on('click', onClick); //点击地图
map.on('dblclick', onDoubleClick);
map.on('mousemove', onMove)//双击地图

//map.off(....) 关闭该事件

function onClick(e) {

points.push([e.latlng.lat, e.latlng.lng])
lines.addLatLng(e.latlng)
// map.addLayer(tempLines)
// map.addLayer(lines)
tempLines.addTo(Map.drawLayer);
lines.addTo(Map.drawLayer);
const node=L.circle(e.latlng, { color: '#ff0000', fillColor: 'ff0000', fillOpacity: 1 })
// map.addLayer(node)
node.addTo(Map.drawLayer);
geometry.push(node)

}
function onMove(e) {
if (points.length > 0) {
ls = [points[points.length - 1], [e.latlng.lat, e.latlng.lng], points[0]]
tempLines.setLatLngs(ls)
// map.addLayer(tempLines)
}
}

function onDoubleClick(e) {
geometry.push(L.polygon(points).addTo(Map.drawLayer))
points.push(points[0]);
getIntersect(JSON.stringify(XY2YX([points])[0]),Map.drawbuildingLayer,map);
//画完的结果给到text中
var temp=$(".cond1").text()+"自定义:"+JSON.stringify(XY2YX([points])[0])+"; ";
$(".cond1").text(temp);
points = []
//map.removeLayer(tempLines)
//tempLines.remove()
lines.remove()
tempLines.remove()
lines = new L.polyline([])
map.off('click'); //点击地图
map.off('dblclick');
map.off('mousemove')//双击地图
}

}

3、地图查询

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Spatial Queries on a Feature Layer</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>

<script src="https://unpkg.com/esri-leaflet@3.0.4/dist/esri-leaflet.js"
integrity="sha512-oUArlxr7VpoY7f/dd3ZdUL7FGOvS79nXVVQhxlg6ij4Fhdc4QID43LUFRs7abwHNJ0EYWijiN5LP2ZRR2PY4hQ=="
crossorigin=""></script>

<script src="https://unpkg.com/esri-leaflet-vector@3.1.1/dist/esri-leaflet-vector.js"
integrity="sha512-7rLAors9em7cR3/583gZSvu1mxwPBUjWjdFJ000pc4Wpu+fq84lXF1l4dbG4ShiPQ4pSBUTb4e9xaO6xtMZIlA=="
crossorigin=""></script>

<div id="panel" class="leaflet-bar">
Neighborhoods
<select name="relation" id="relationSelect">
<option value="within">Within<options>
<option value="contains">Contains<options>
<option value="intersects">Intersects<options>
<option value="overlaps">Overlaps<options>
</select>
<select name="geometry" id="geometrySelect">
<option value="bounds">Bounds<options>
<option value="point">Point<options>
<option value="line">Line<options>
<option value="polygon">Polygon<options>
</select>
<button id="executeQuery">Run Query</button>
</div>

L.esri.Vector.vectorBasemapLayer('ArcGIS:Topographic', {
apikey: apiKey // Replace with your API key - https://developers.arcgis.com
}).addTo(map);

// create our layer
var neighborhoods = L.esri.featureLayer({
url: 'https://www.portlandmaps.com/arcgis/rest/services/Public/Zoning/MapServer/32',
style: {
color: '#000',
weight: 1,
opacity: 0.4
}
}).addTo(map);

// create a marker object to query against
var marker = L.marker([45.571034, -122.686386]).addTo(map);

// create a bounds object to query against
var bounds = L.latLngBounds([
[45.494556, -122.691536],
[45.538100, -122.608452]
]);

// create a rectangle to visualize the bounds
L.rectangle(bounds, {
color: 'blue',
weight: 2
}).addTo(map);

// create a line to query against
var line = L.polyline([
[45.559256, -122.611885],
[45.502256, -122.562790],
[45.483244, -122.620468]
], {
color: 'blue',
weight: 2
}).addTo(map);

// create a polygon to query against
var polygon = L.polygon([
[45.484894, -122.493696],
[45.512025, -122.492199],
[45.517669, -122.561457],
[45.487343, -122.558573]
], {
color: 'blue',
weight: 2
}).addTo(map);

// collect geometries into an object so we can reference them later
var geometries = {
bounds: bounds,
line: line,
polygon: polygon,
point: marker
};

// get references to our <select> elements
var relationship = document.getElementById('relationSelect');
var geometry = document.getElementById('geometrySelect');
var runQueryButton = document.getElementById('executeQuery');

var previousIds = [];

// reset all features back to their regularly defined styles
function reset () {
for (var i = previousIds.length - 1; i >= 0; i--) {
neighborhoods.resetStyle(previousIds[i]);
}
}
// query the API and highlight features
function query () {
reset();
// lookup our input geometry
var inputGeometry = geometries[geometry.value];

// query the service executing the selected relation with the selected input geometry
neighborhoods.query()[relationship.value](inputGeometry).ids(function (error, ids) {
// if there is an error with the query, you can handle it here
if (error) {
console.log('Error with query: ' + error);
} else if (ids) {
previousIds = ids;
for (var i = ids.length - 1; i >= 0; i--) {
neighborhoods.setFeatureStyle(ids[i], { color: 'red', weight: 2 });
}
}
});
}

// query when "Run Query" button is clicked
runQueryButton.addEventListener('click', query);

// once all neighborhoods have loaded run the default query
neighborhoods.once('load', function () {
query();
});
</script>

</body>
</html>