<!DOCTYPE html>
<html lang="en">
<head>
<title>地图模态层</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Metrophobic">
<script src="js/turf.min.js" type="text/javascript"></script>
<script src="js/regionData.js" type="text/javascript"></script>
<script src="http://js.arcgis.com/3.12/"></script>
<link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css" />
<style type="text/css">
html, body, #mapDIV {
height: 100%; width: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="mapDIV"></div>
<script type="text/javascript">
require([
"esri/map","esri/layers/ArcGISTiledMapServiceLayer", "esri/geometry/Point", "esri/SpatialReference",
"esri/symbols/SimpleMarkerSymbol", "esri/graphic", "esri/geometry/Polygon", "esri/symbols/SimpleFillSymbol","esri/symbols/SimpleLineSymbol","esri/Color","esri/layers/GraphicsLayer","esri/layers/MapImageLayer","esri/layers/MapImage"
], function(Map, ArcGISTiledMapServiceLayer, Point, SpatialReference, SimpleMarkerSymbol, Graphic, Polygon, SimpleFillSymbol,SimpleLineSymbol,Color,GraphicsLayer,MapImageLayer,MapImage) {
var mymap = new Map("mapDIV", { logo: false, slider: false,center: [122.24832206933709,39.648039879101], zoom: 8});
var baselayer = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/arcgis/rest/services/ESRI_Imagery_World_2D/MapServer");
mymap.addLayer(baselayer);//layer添加到地图map对象
var graphiclayer = new GraphicsLayer();
mymap.addLayer(graphiclayer);//layer添加到地图map对象
var highlightSymbol = new esri.symbol.SimpleFillSymbol(
esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new esri.Color([255, 0, 0, 0]), 3
),
new esri.Color([0, 0, 0, 0.6])
);
var obj = getRegionByNAME("普兰店市");
mymap.on("load", function (evt) {
if (obj) {
loadModalLayer();
}
});
//地图范围变化事件
mymap.on("extent-change", function (evt) {
loadModalLayer();
});
function loadModalLayer() {
graphiclayer.clear();
var boundCoord = [[[mymap.extent.xmin, mymap.extent.ymin], [mymap.extent.xmax, mymap.extent.ymin], [mymap.extent.xmax, mymap.extent.ymax], [mymap.extent.xmin, mymap.extent.ymax], [mymap.extent.xmin, mymap.extent.ymin]]];
var zoneCoord = obj.geometry.rings;
var boundGeo = turf.polygon(boundCoord),
zoneGeo = turf.polygon(zoneCoord);
var modalJson = turf.difference(boundGeo, zoneGeo);
if (modalJson && modalJson.geometry && modalJson.geometry.coordinates.length > 0) {
if (zoneCoord.length && zoneCoord.length > 1) {
for (var i = 0; i < zoneCoord.length; i++) {
modalJson.geometry.coordinates.push(zoneCoord[i]);
}
}
var polygon = null;
switch (modalJson.geometry.type) {
case "Polygon":
polygon = new esri.geometry.Polygon(modalJson.geometry.coordinates);
polygon.setSpatialReference(mymap.spatialReference);
var modalGraphic = new esri.Graphic(polygon, highlightSymbol);
graphiclayer.add(modalGraphic);
break;
case "MultiPolygon":
for (var j = 0; j < modalJson.geometry.coordinates.length > 0; j++) {
polygon = new esri.geometry.Polygon(modalJson.geometry.coordinates[j]);
polygon.setSpatialReference(mymap.spatialReference);
var modalGraphic = new esri.Graphic(polygon, highlightSymbol);
graphiclayer.add(modalGraphic);
}
break;
}
}
}
/**
* 根据区域名称获取对应的区域模拟数据
*/
function getRegionByNAME(regionNAME){
var obj = {};
if (regionData && regionData.length>0) {
for (var i = 0; i < regionData.length; i++) {
var data = regionData[i];
if (data.attributes.NAME == regionNAME) {
obj = data;
break;
}
}
}
return obj;
}
});
</script>
</body>
</html>
arcgis api 3.x for js 入门开发系列二十二地图模态层源码
版权申诉
140 浏览量
2022-04-02
22:19:55
上传
评论
收藏 194KB ZIP 举报
地图模态层_arcgis api 3.x for js.zip （3个子文件） 
地图模态层_arcgis api 3.x for js js 
regionData.js 644KB turf.min.js 557KB
modalLayer.html 4KB资源评论
GIS之家
- 粉丝: 455
- 资源: 51
最新资源
- mongodb数据库基本操作.pdf
- C#，布尔可满足性问题（Boolean Satisfiability Problem）算法与源代码
- C#，回文分割问题（Palindrome Partitioning Problem）算法与源代码
- C#，煎饼排序问题（Pancake Sorting Problem）算法与源代码
- C#，排列组合的堆生成法（Heap’s Algorithm for generating permutations）算法与源代码
- C#，老鼠迷宫问题的回溯法求解（Rat in a Maze）算法与源代码
- 6693eeb8d683458a07938615fba9e68f.apk
- C#，数值计算，解微分方程的龙格-库塔二阶方法与源代码
- C#，数值计算，用割线法（Secant Method）求方程根的算法与源代码
- C#，子集和问题（Subset Sum Problem）的算法与源代码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
