Skip to content

A
apaas-ui
Commit 30198240 authored by 张豪's avatar 张豪
Browse files
Options

修改部分地图demo

parent fd88d779
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 682 additions and 1668 deletions
static/view/data/arcgisTreeNode.json
View file @ 30198240
...@@ -3,6 +3,11 @@ ...@@ -3,6 +3,11 @@
{ {
"label": "arcgis server 地图示例", "label": "arcgis server 地图示例",
"children": [ "children": [
{
"label": "基础地图",
"name": "basic_web_map",
"branch": "arcgis_latest"
},
{ {
"label": "二维地图", "label": "二维地图",
"name": "2d_base_map", "name": "2d_base_map",
...@@ -18,31 +23,6 @@ ...@@ -18,31 +23,6 @@
"name": "2dto3d", "name": "2dto3d",
"branch": "arcgis_latest" "branch": "arcgis_latest"
}, },
{
"label": "二维地图之加载csv数据源",
"name": "2d_csvlayer",
"branch": "arcgis_latest"
},
{
"label": "二维地图之加载json数据源",
"name": "2d_loadjson",
"branch": "arcgis_latest"
},
{
"label": "二维地图之查询",
"name": "2d_query",
"branch": "arcgis_latest"
},
{
"label": "三维地图之加载csv数据源",
"name": "3d_csvlayer",
"branch": "arcgis_latest"
},
{
"label": "基础地图",
"name": "basic_web_map",
"branch": "arcgis_latest"
},
{ {
"label": "地图级别控件", "label": "地图级别控件",
"name": "sliderZoom", "name": "sliderZoom",
...@@ -58,34 +38,19 @@ ...@@ -58,34 +38,19 @@
"name": "geocoding", "name": "geocoding",
"branch": "arcgis_latest" "branch": "arcgis_latest"
}, },
{
"label": "缓冲区服务与空间分析",
"name": "linebuffer",
"branch": "arcgis_latest"
},
{
"label": "人员轨迹查询",
"name": "peoplecluster",
"branch": "arcgis_latest"
},
{ {
"label": "高亮图层要素", "label": "高亮图层要素",
"name": "pointshine_map", "name": "pointshine_map",
"branch": "arcgis_latest" "branch": "arcgis_latest"
}, },
{ {
"label": "天地图_WMTS", "label": "ArcGIS_WMTS",
"name": "tdt_wmts_map", "name": "arcgis_wmts",
"branch": "arcgis_latest"
},
{
"label": "方正_WMTS",
"name": "fz_map",
"branch": "arcgis_latest" "branch": "arcgis_latest"
}, },
{ {
"label": "Geoserver_WMTS服务", "label": "Mapbox_WMTS服务",
"name": "arcgis_load_geoserver_wmts", "name": "arcgis_load_mapbox_wmts",
"branch": "arcgis_latest" "branch": "arcgis_latest"
}, },
{ {
...@@ -98,11 +63,6 @@ ...@@ -98,11 +63,6 @@
"name": "multilayer3search", "name": "multilayer3search",
"branch": "arcgis_latest" "branch": "arcgis_latest"
}, },
{
"label": "多图层属性查询",
"name": "multilayer4search",
"branch": "arcgis_latest"
},
{ {
"label": "通用多图层多字段查询", "label": "通用多图层多字段查询",
"name": "multilayersandfeilds_3search", "name": "multilayersandfeilds_3search",
...@@ -143,6 +103,16 @@ ...@@ -143,6 +103,16 @@
"name": "migrate2", "name": "migrate2",
"branch": "arcgis_latest" "branch": "arcgis_latest"
}, },
{
"label": "二维地图之加载csv数据源",
"name": "2d_csvlayer",
"branch": "arcgis_latest"
},
{
"label": "三维地图之加载csv数据源",
"name": "3d_csvlayer",
"branch": "arcgis_latest"
},
{ {
"label": "公交线路图", "label": "公交线路图",
"name": "bus_line", "name": "bus_line",
......
static/view/demo/page-2d_base_map.html
View file @ 30198240
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>2D Base Map</title> <title>2D Base Map</title>
...@@ -10,22 +10,49 @@ ...@@ -10,22 +10,49 @@
html, html,
body, body,
#viewDiv { #viewDiv {
padding: 0; padding: 0;
margin: 0; margin: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
</style> </style>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script> <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script> <script>
require([ require([
"esri/Map", "esri/config",
"esri/views/MapView" "esri/Map",
], function(Map, MapView) { "esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"dojo/domReady!"
], function (ESRICONFIG, Map, Basemap, MapView, WebTileLayer) {
// 通过瓦片形式加载天地图
// 天地图根据投影分为两种：墨卡托和经纬度，在3D视图中使用Web墨卡托投影
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
var tiledLayer = new WebTileLayer({
urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=vec&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
var annolayer = new WebTileLayer({
urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
//请求天地图服务跨域的设置
ESRICONFIG.request.corsEnabledServers.push(
"t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
"t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
);
// 初始化天地图-Web墨卡托投影底图
var basemap = new Basemap({
id: "tdt",
title: "天地图-Web墨卡托",
baseLayers: [tiledLayer, annolayer]
})
// 初始化地图
var map = new Map({ var map = new Map({
basemap: "streets" basemap: basemap
}); });
// 初始化二维视图
var view = new MapView({ var view = new MapView({
container: "viewDiv", container: "viewDiv",
map: map, map: map,
...@@ -35,6 +62,7 @@ ...@@ -35,6 +62,7 @@
}); });
</script> </script>
</head> </head>
<body> <body>
<div id="viewDiv"></div> <div id="viewDiv"></div>
</body> </body>
......
static/view/demo/page-2d_csvlayer.html
View file @ 30198240
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>CSVLayer - 4.11</title> <title>CSVLayer - 2d</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css"> <link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
<style> <style>
html, html,
...@@ -28,7 +29,8 @@ ...@@ -28,7 +29,8 @@
"esri/layers/CSVLayer", "esri/layers/CSVLayer",
"esri/renderers/SimpleRenderer", "esri/renderers/SimpleRenderer",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleMarkerSymbol",
"esri/Color" "esri/Color",
"dojo/domReady!"
], function (Map, Basemap, MapView, WebTileLayer, TileInfo, CSVLayer, SimpleRenderer, SimpleMarkerSymbol, Color) { ], function (Map, Basemap, MapView, WebTileLayer, TileInfo, CSVLayer, SimpleRenderer, SimpleMarkerSymbol, Color) {
// 通过瓦片形式加载天地图的 // 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度 // 天地图根据投影分为两种：墨卡托和经纬度
...@@ -152,24 +154,26 @@ ...@@ -152,24 +154,26 @@
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别 // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
var tiledLayer = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", { var tiledLayer = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"], subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo tileInfo: tileInfo,
spatialReference: {
wkid: 4326
},
}); });
var annomap = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", { var annomap = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"], subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo tileInfo: tileInfo,
spatialReference: {
wkid: 4326
},
}); });
// 天地图经纬度地图及注记作为底图 // 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({ var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap], baseLayers: [tiledLayer, annomap],
title: "TDT Basemap", title: "TDT Basemap",
id: "tdtBasemap", id: "tdtBasemap"
spatialReference: {
wkid: 4326
},
}); });
// csv文件的url // csv文件的url
var url = "https://apaas.wodcloud.com/mapsamples/static/data/stations.csv"; var url = "https://apaas3.wodcloud.com/mapstatic/data/stations.csv";
var template = { var template = {
title: "Weather Observation Station", title: "Weather Observation Station",
content: " {province} {st_name} on {ele} with id {stid}." content: " {province} {st_name} on {ele} with id {stid}."
...@@ -184,20 +188,19 @@ ...@@ -184,20 +188,19 @@
}); });
//csv图层的渲染配置 //csv图层的渲染配置
csvLayer.renderer = { csvLayer.renderer = {
type: "simple", type: "simple",
symbol: { symbol: {
type: "simple-marker", type: "simple-marker",
size: 8, size: 8,
color: [245,125,33], color: [245, 125, 33],
outline: { outline: {
width: 1, width: 1,
color: "white" color: "white"
} }
} }
}; };
// 创建地图数据 // 创建地图数据
var map = new Map({ var map = new Map({
basemap: tdtBasemap, basemap: tdtBasemap,
layers: [csvLayer] layers: [csvLayer]
}); });
...@@ -205,9 +208,6 @@ ...@@ -205,9 +208,6 @@
var view = new MapView({ var view = new MapView({
map: map, map: map,
container: "viewDiv", container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 4, zoom: 4,
constraints: { constraints: {
lods: tileInfo.lods, lods: tileInfo.lods,
......
static/view/demo/page-2d_loadjson.html deleted 100644 → 0
View file @ fd88d779
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>People Cluster</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas.wodcloud.com/mapsamples/static/config/mapconfig.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
$(function () {
require([
"esri/Map",
"esri/Graphic",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/geometry/Point",
"esri/widgets/Search",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/layers/GraphicsLayer",
"esri/geometry/SpatialReference",
"esri/layers/VectorTileLayer",
"esri/symbols/PictureMarkerSymbol"
], function (Map, Graphic, Basemap, MapView, WebTileLayer, TileInfo, Point, Search, QueryTask, Query,
GraphicsLayer, SpatialReference,
VectorTileLayer, PictureMarkerSymbol) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
var tileInfo = new TileInfo({
dpi: 90.71428571427429, //解析度，即像素
rows: 256,
cols: 256,
compressionQuality: 0, //压缩像素值
origin: {
x: -180,
y: 90
},
spatialReference: {
wkid: 4326
},
lods: [ //定义平铺方案的细节级别数组
{
level: 1,
levelValue: 1,
resolution: 0.703125,
scale: 295497593.05875003
}, {
level: 2,
levelValue: 2,
resolution: 0.3515625,
scale: 147748796.52937502
}, {
level: 3,
levelValue: 3,
resolution: 0.17578125,
scale: 73874398.264687508
}, {
level: 4,
levelValue: 4,
resolution: 0.087890625,
scale: 36937199.132343754
}, {
level: 5,
levelValue: 5,
resolution: 0.0439453125,
scale: 18468599.566171877
}, {
level: 6,
levelValue: 6,
resolution: 0.02197265625,
scale: 9234299.7830859385
}, {
level: 7,
levelValue: 7,
resolution: 0.010986328125,
scale: 4617149.8915429693
}, {
level: 8,
levelValue: 8,
resolution: 0.0054931640625,
scale: 2308574.9457714846
}, {
level: 9,
levelValue: 9,
resolution: 0.00274658203125,
scale: 1154287.4728857423
}, {
level: 10,
levelValue: 10,
resolution: 0.001373291015625,
scale: 577143.73644287116
}, {
level: 11,
levelValue: 11,
resolution: 0.0006866455078125,
scale: 288571.86822143558
}, {
level: 12,
levelValue: 12,
resolution: 0.00034332275390625,
scale: 144285.93411071779
}, {
level: 13,
levelValue: 13,
resolution: 0.000171661376953125,
scale: 72142.967055358895
}, {
level: 14,
levelValue: 14,
resolution: 8.58306884765625e-005,
scale: 36071.483527679447
}, {
level: 15,
levelValue: 15,
resolution: 4.291534423828125e-005,
scale: 18035.741763839724
}, {
level: 16,
levelValue: 16,
resolution: 2.1457672119140625e-005,
scale: 9017.8708819198619
}, {
level: 17,
levelValue: 17,
resolution: 1.0728836059570313e-005,
scale: 4508.9354409599309
}, {
level: 18,
levelValue: 18,
resolution: 5.3644180297851563e-006,
scale: 2254.4677204799655
}, {
level: 19,
levelValue: 19,
resolution: 2.68220901489257815e-006,
scale: 1127.23386023998275
}, {
level: 20,
levelValue: 2,
resolution: 1.341104507446289075e-006,
scale: 563.616930119991375
}
]
});
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
var tiledLayer = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
});
var annomap = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
});
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
});
// 创建地图
var map = new Map({
basemap: tdtBasemap
});
//json格式的地理数据
var url = "https://apaas.wodcloud.com/mapsamples/static/data/ga_footprint.json"
$.ajax({
type: "GET",
url: url,
dataType: "json",
timeout: 5000,
success: function (response) {
console.log(response)
loaddata(response);
},
error: function (xhr, status, err) {
alert("找不到数据");
}
});
var footprintlayer = new GraphicsLayer();
function loaddata(data) {
if (!data.features || !data.features.length) {
console.log("no data");
return;
}
var wkid = data.crs.properties.name.split(':')[1];
var features = data.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
if (feature) {
var properties = feature.properties;
var reportor = properties.BUS_REPO_1 ? properties.BUS_REPO_1 : "匿名";
var happenedTime = properties.BUS_HAPPEN;
var happenedAddress = properties.BUS_ADDRES;
var description = properties.BUS_DESCRI;
var lon = feature.geometry.coordinates[0];
var lat = feature.geometry.coordinates[1];
var pt = new Point({
"x": lon,
"y": lat,
"spatialReference": new SpatialReference(wkid)
});
var symbol = new PictureMarkerSymbol("https://apaas.wodcloud.com/mapsamples/static/images/marker-yellow.png", 26, 37);
var attr = {
"name": reportor,
"happenedTime": happenedTime,
"happenedAddress": happenedAddress,
"detail": description
};
var graphic = new Graphic(pt, symbol, attr);
footprintlayer.add(graphic);
}
}
}
const search = new Search({
view: view,
resultGraphicEnabled: false,
popupEnabled: false
});
map.add(footprintlayer);
// 创建二维地图
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 16,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [119.636832387, 30.944171371]
});
view.ui.add(search, {
position: "top-right"
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="esri-widget" id="optionsDiv">
<h2>过滤条件</h2>
<br />
<label for="province">省 ： </label>
<select class="esri-widget" id="valSelect">
<option value="北京">北京市</option>
<option value="湖北">湖北省</option>
<option value="天津">天津市</option>
<option value="上海">上海市</option>
<option value="江苏">江苏省</option>
</select>
<br />
<label for="name">站点名称:</label>
<input id="st_name" type="text">
<button class="esri-widget" id="doBtn">检索</button> <br />
<p><span id="printResults"></span></p>
</div>
</body>
</html>
static/view/demo/page-2d_query.html deleted 100644 → 0
View file @ fd88d779
This diff is collapsed.
static/view/demo/page-2dto3d.html
View file @ 30198240
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
...@@ -15,13 +14,11 @@ ...@@ -15,13 +14,11 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
#infoDiv { #infoDiv {
position: absolute; position: absolute;
top: 15px; top: 15px;
left: 60px; left: 60px;
} }
#infoDiv input { #infoDiv input {
border: none; border: none;
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
...@@ -31,12 +28,13 @@ ...@@ -31,12 +28,13 @@
<script> <script>
require([ require([
"esri/config", "esri/config",
"esri/layers/WebTileLayer",
"esri/Map", "esri/Map",
"esri/Basemap",
"esri/views/MapView", "esri/views/MapView",
"esri/views/SceneView", "esri/views/SceneView",
"esri/layers/WebTileLayer",
"dojo/domReady!" "dojo/domReady!"
], function (ESRICONFIG, WebTileLayer, Map, MapView, SceneView) { ], function (ESRICONFIG, Map, Basemap, MapView, SceneView, WebTileLayer) {
// 通过瓦片形式加载天地图 // 通过瓦片形式加载天地图
// 天地图根据投影分为两种：墨卡托和经纬度，在3D视图中使用Web墨卡托投影 // 天地图根据投影分为两种：墨卡托和经纬度，在3D视图中使用Web墨卡托投影
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别 // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
...@@ -48,58 +46,54 @@ ...@@ -48,58 +46,54 @@
urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}", urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"] subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
}); });
//请求天地图服务跨域的设置 // 请求天地图服务跨域的设置
ESRICONFIG.request.corsEnabledServers.push( ESRICONFIG.request.corsEnabledServers.push(
"t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn", "t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
"t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn" "t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
); );
// 初始化天地图-Web墨卡托投影底图
var basemap = new Basemap({
id: "tdt",
title: "天地图-Web墨卡托",
baseLayers: [tiledLayer,annolayer]
})
// 获取切换按钮节点
var switchButton = document.getElementById("switch-btn"); var switchButton = document.getElementById("switch-btn");
//统一管理页面中的地图视图 // 统一管理页面中的地图视图
var appConfig = { var appConfig = {
mapView: null, //2D视图 mapView: null, //2D视图
sceneView: null, //3D视图 sceneView: null, //3D视图
activeView: null, //当前显示的视图 activeView: null, //当前显示的视图
container: "viewDiv" container: "viewDiv"
}; };
// 视图初始设置，缩放等级，中心
//视图初始设置，缩放等级，中心
var initialViewParams = { var initialViewParams = {
zoom: 5, zoom: 5,
center: [114, 30], center: [114, 30],
container: appConfig.container container: appConfig.container
}; };
//同一个地图数据资源 // 初始化地图
var map = new Map({ var map = new Map({
ground: "world-elevation" basemap: basemap
}); });
map.layers.add(tiledLayer);
map.layers.add(annolayer);
//创建2D视图 //创建2D视图
appConfig.mapView = createView(initialViewParams, "2d"); appConfig.mapView = createView(initialViewParams, "2d");
appConfig.mapView.map = map; appConfig.mapView.map = map;
appConfig.activeView = appConfig.mapView; appConfig.activeView = appConfig.mapView;
// 创建3D视图 // 创建3D视图
initialViewParams.container = null; //初始状况不显示3D视图 initialViewParams.container = null; //初始状况不显示3D视图
initialViewParams.map = map; initialViewParams.map = map;
appConfig.sceneView = createView(initialViewParams, "3d"); appConfig.sceneView = createView(initialViewParams, "3d");
// 转换按钮 // 转换按钮
switchButton.addEventListener("click", function () { switchButton.addEventListener("click", function () {
switchView(); switchView();
}); });
function switchView() { function switchView() {
//判断当前视图是否是3D视图 //判断当前视图是否是3D视图
var is3D = appConfig.activeView.type === "3d"; var is3D = appConfig.activeView.type === "3d";
var activeViewpoint = appConfig.activeView.viewpoint.clone(); var activeViewpoint = appConfig.activeView.viewpoint.clone();
//移除当前视图 //移除当前视图
appConfig.activeView.container = null; appConfig.activeView.container = null;
if (is3D) { if (is3D) {
// 如果是3D视图，就将其转换为2D视图 // 如果是3D视图，就将其转换为2D视图
appConfig.mapView.viewpoint = activeViewpoint; appConfig.mapView.viewpoint = activeViewpoint;
...@@ -114,7 +108,6 @@ ...@@ -114,7 +108,6 @@
switchButton.value = "2D"; switchButton.value = "2D";
} }
} }
//创建2D和3D视图 //创建2D和3D视图
function createView(params, type) { function createView(params, type) {
var view; var view;
...@@ -128,10 +121,8 @@ ...@@ -128,10 +121,8 @@
return view; return view;
} }
}); });
</script> </script>
</head> </head>
<body> <body>
<div id="viewDiv"></div> <div id="viewDiv"></div>
<div id="infoDiv"> <div id="infoDiv">
...@@ -139,5 +130,4 @@ ...@@ -139,5 +130,4 @@
value="3D" /> value="3D" />
</div> </div>
</body> </body>
</html> </html>
static/view/demo/page-3d_base_map.html
View file @ 30198240
...@@ -19,13 +19,14 @@ ...@@ -19,13 +19,14 @@
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script> <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script> <script>
require([ require([
"esri/config",
"esri/Map", "esri/Map",
"esri/Basemap",
"esri/views/SceneView", "esri/views/SceneView",
"esri/layers/WebTileLayer", "esri/layers/WebTileLayer",
"esri/config",
"esri/geometry/Point", "esri/geometry/Point",
"dojo/domReady!" "dojo/domReady!"
], function (Map, SceneView, WebTileLayer, ESRICONFIG, Point) { ], function (ESRICONFIG,Map, Basemap, SceneView, WebTileLayer, Point) {
// 通过瓦片形式加载天地图 // 通过瓦片形式加载天地图
// 天地图根据投影分为两种：墨卡托和经纬度，在3D视图中使用Web墨卡托投影 // 天地图根据投影分为两种：墨卡托和经纬度，在3D视图中使用Web墨卡托投影
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别 // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
...@@ -37,37 +38,41 @@ ...@@ -37,37 +38,41 @@
urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}", urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"] subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
}); });
//请求天地图服务跨域的设置 // 请求天地图服务跨域的设置
ESRICONFIG.request.corsEnabledServers.push( ESRICONFIG.request.corsEnabledServers.push(
"t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn", "t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
"t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn" "t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
); );
// 初始化天地图-Web墨卡托投影底图
var basemap = new Basemap({
id: "tdt",
title: "天地图-Web墨卡托",
baseLayers: [tiledLayer,annolayer]
})
// 初始化地图
var map = new Map({ var map = new Map({
ground: "world-elevation" basemap: basemap
}); });
map.layers.add(tiledLayer); // 初始化三维视图
map.layers.add(annolayer);
var view = new SceneView({ var view = new SceneView({
map: map, map: map,
container: "viewDiv", container: "viewDiv",
zoom: 3, zoom: 3,
center: [114, 30] center: [114, 30]
}); });
var pt = new Point({ // 缩放到特定点
longitude: 106.7, view.when(function() {
latitude: 26.6
});
view.whenLayerView(tiledLayer,annolayer).then(function() {
setTimeout(view.goTo({ setTimeout(view.goTo({
target: pt, target: new Point({
longitude: 106.7,
latitude: 26.6
}),
zoom: 10, zoom: 10,
tilt: 0, tilt: 0,
heading: 0 heading: 0
}), 4000) }), 4000)
}) })
}); });
</script> </script>
</head> </head>
......
static/view/demo/page-3d_csvlayer.html
View file @ 30198240
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>CSVLayer - 4.11</title> <title>CSVLayer-3d</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css"> <link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
<style> <style>
html, html,
...@@ -16,20 +16,21 @@ ...@@ -16,20 +16,21 @@
width: 100%; width: 100%;
} }
</style> </style>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script> <script src="https://apaas3.wodcloud.com/mapstatic/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script> <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script> <script>
require([ require([
"esri/config", "esri/config",
"esri/layers/WebTileLayer",
"esri/Map", "esri/Map",
"esri/Basemap",
"esri/views/SceneView", "esri/views/SceneView",
"esri/layers/WebTileLayer",
"esri/layers/CSVLayer", "esri/layers/CSVLayer",
"esri/renderers/SimpleRenderer", "esri/renderers/SimpleRenderer",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleMarkerSymbol",
"esri/Color", "esri/Color",
"dojo/domReady!" "dojo/domReady!"
], function (ESRICONFIG, WebTileLayer, Map, SceneView, CSVLayer, SimpleRenderer, SimpleMarkerSymbol, Color) { ], function (ESRICONFIG, Map, Basemap, SceneView, WebTileLayer, CSVLayer, SimpleRenderer, SimpleMarkerSymbol, Color) {
// 通过瓦片形式加载天地图 // 通过瓦片形式加载天地图
// 天地图根据投影分为两种：墨卡托和经纬度，在3D视图中使用Web墨卡托投影 // 天地图根据投影分为两种：墨卡托和经纬度，在3D视图中使用Web墨卡托投影
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别 // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
...@@ -41,64 +42,60 @@ ...@@ -41,64 +42,60 @@
urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}", urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"] subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
}); });
//请求天地图服务跨域的设置 // 请求天地图服务跨域的设置
ESRICONFIG.request.corsEnabledServers.push( ESRICONFIG.request.corsEnabledServers.push(
"t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn", "t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
"t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn" "t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
); );
// 初始化天地图-Web墨卡托投影底图
var url = var basemap = new Basemap({
"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv"; id: "tdt",
var url = "https://apaas.wodcloud.com/mapsamples/static/data/stations.csv"; title: "天地图-Web墨卡托",
baseLayers: [tiledLayer, annolayer]
})
var template = { // 初始化地图
title: "Weather Observation Station",
content: " {province} {st_name} on {ele} with id {stid}."
};
var csvLayer = new CSVLayer({
url: url,
copyright: "big-data",
popupTemplate: template,
elevationInfo: {
//在地球表面放置
mode: "on-the-ground"
}
});
csvLayer.renderer = {
type: "simple", //渲染的类型
symbol: {
type: "point-3d", //要素为3D点
symbolLayers: [{
type: "icon", // 符号类型为图标
material: {
color: [238, 69, 0, 0.75]
},
outline: {
width: 0.5,
color: "white"
},
size: "12px"
}]
}
};
var map = new Map({ var map = new Map({
ground: "world-elevation" basemap: basemap
}); });
map.layers.add(tiledLayer); // 初始化三维视图
map.layers.add(annolayer);
map.layers.add(csvLayer);
var view = new SceneView({ var view = new SceneView({
container: "viewDiv", container: "viewDiv",
center: [108.3, 33.9], center: [108.3, 33.9],
zoom: 4, zoom: 4,
map: map map: map
}); });
// 添加csv图层
var url = "https://apaas3.wodcloud.com/mapstatic/data/stations.csv";
var csvLayer = new CSVLayer({
url: url,
copyright: "big-data",
popupTemplate: {
title: "Weather Observation Station",
content: " {province} {st_name} on {ele} with id {stid}."
},
elevationInfo: {
mode: "on-the-ground" //在地球表面放置
},
renderer: {
type: "simple", //渲染的类型
symbol: {
type: "point-3d", //要素为3D点
symbolLayers: [{
type: "icon", // 符号类型为图标
material: {
color: [238, 69, 0, 0.75]
},
outline: {
width: 0.5,
color: "white"
},
size: "12px"
}]
}
}
});
map.layers.add(csvLayer);
}); });
</script> </script>
</head> </head>
...@@ -106,4 +103,4 @@ ...@@ -106,4 +103,4 @@
<div id="viewDiv"></div> <div id="viewDiv"></div>
</body> </body>
</html> </html>
\ No newline at end of file
static/view/demo/page-arcgis_load_geoserver_wmts.html deleted 100644 → 0
View file @ fd88d779
This diff is collapsed.
static/view/demo/page-arcgis_load_mapbox_wmts.html 0 → 100644
View file @ 30198240
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Mapbox WMTS Map</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/Map",
"esri/Basemap",
"esri/views/SceneView",
"esri/layers/WebTileLayer",
"dojo/domReady!"
], function (Map, Basemap, SceneView, WebTileLayer) {
// 初始化mapbox wmts图层服务
let tiledlayer = new WebTileLayer({
urlTemplate:
"https://mapboxwmts.ali.wodcloud.com/styles/v1/cfangogogo/ckexp7fhw0aot19n63ngh1h1z/tiles/512/{level}/{col}/{row}?access_token=pk.eyJ1IjoiY2ZhbmdvZ29nbyIsImEiOiJja2IxamxkN24wMHJsMnNtZGNzYWd2NnBlIn0.NhCC9fS15MhO5lpl9i45BQ"
});
// 底图中使用mapbox wmts图层服务
let mapboxBasemap = new Basemap({
baseLayers: [tiledlayer],
title: "Mapbox Basemap",
id: "mapboxBasemap",
spatialReference: {
wkid: 3857
}
});
// 初始化地图
let map = new Map({
basemap: mapboxBasemap
});
// 创建三维地图
var view = new SceneView({
container: "viewDiv",
map: map,
spatialReference: {
wkid: 3857
},
camera: {
position: [119.95393142467243, 31.779518311309737,500],
tilt: 55,
heading: 90
},
constraints: {
maxZoom: 22,
minZoom: 0
},
zoom: 12
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-arcgis_wmts.html 0 → 100644
View file @ 30198240
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ArcGIS WMTS Map</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/TileLayer",
"dojo/domReady!"
], function(Map, Basemap, MapView, TileLayer) {
// ArcGIS 切片服务
let tilelayer = new TileLayer({
url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'
});
// 作为底图
var agsBasemap = new Basemap({
baseLayers: [tilelayer],
title: "ArcGIS Basemap",
id: "agsBasemap"
});
// 创建地图
var map = new Map({
basemap: agsBasemap
});
// 创建二维地图
var view = new MapView({
map: map,
container: "viewDiv",
zoom: 12,
constraints: {
snapToZoom: true
},
center: [106.72, 26.585]
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-basic_web_map.html
View file @ 30198240
...@@ -24,10 +24,10 @@ ...@@ -24,10 +24,10 @@
"esri/WebMap" "esri/WebMap"
], function(esriConfig, MapView, WebMap) { ], function(esriConfig, MapView, WebMap) {
//使用portal门户的地图资源 //使用portal门户的地图资源
esriConfig.portalUrl = "https://apaasgis.wodcloud.com/arcgis"; esriConfig.portalUrl = "https://apaasgis.wodcloud.com/portal";
var webmap = new WebMap({ var webmap = new WebMap({
portalItem: { portalItem: {
id: "54a708b3890a4d1aaff37988697aeaec" id: "aa912ada83904d7c901066673ee1a5aa"
} }
}); });
......
static/view/demo/page-featurelayer.html
View file @ 30198240
This diff is collapsed.
static/view/demo/page-fz_map.html deleted 100644 → 0
View file @ fd88d779
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>TDT WMTS Map</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"dojo/domReady!"
], function(Map, Basemap, MapView, WebTileLayer, TileInfo) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
var tileInfo = new TileInfo({
dpi: 90.71428571427429, //解析度，即像素
rows: 256,
cols: 256,
compressionQuality: 0, //压缩像素值
origin: {
x: -180,
y: 90
},
spatialReference: {
wkid: 4326
},
lods: [ //定义平铺方案的细节级别数组
{
level: 1,
levelValue: 1,
resolution: 0.703125,
scale: 295497593.05875003
}, {
level: 2,
levelValue: 2,
resolution: 0.3515625,
scale: 147748796.52937502
}, {
level: 3,
levelValue: 3,
resolution: 0.17578125,
scale: 73874398.264687508
}, {
level: 4,
levelValue: 4,
resolution: 0.087890625,
scale: 36937199.132343754
}, {
level: 5,
levelValue: 5,
resolution: 0.0439453125,
scale: 18468599.566171877
}, {
level: 6,
levelValue: 6,
resolution: 0.02197265625,
scale: 9234299.7830859385
}, {
level: 7,
levelValue: 7,
resolution: 0.010986328125,
scale: 4617149.8915429693
}, {
level: 8,
levelValue: 8,
resolution: 0.0054931640625,
scale: 2308574.9457714846
}, {
level: 9,
levelValue: 9,
resolution: 0.00274658203125,
scale: 1154287.4728857423
}, {
level: 10,
levelValue: 10,
resolution: 0.001373291015625,
scale: 577143.73644287116
}, {
level: 11,
levelValue: 11,
resolution: 0.0006866455078125,
scale: 288571.86822143558
}, {
level: 12,
levelValue: 12,
resolution: 0.00034332275390625,
scale: 144285.93411071779
}, {
level: 13,
levelValue: 13,
resolution: 0.000171661376953125,
scale: 72142.967055358895
}, {
level: 14,
levelValue: 14,
resolution: 8.58306884765625e-005,
scale: 36071.483527679447
}, {
level: 15,
levelValue: 15,
resolution: 4.291534423828125e-005,
scale: 18035.741763839724
}, {
level: 16,
levelValue: 16,
resolution: 2.1457672119140625e-005,
scale: 9017.8708819198619
}, {
level: 17,
levelValue: 17,
resolution: 1.0728836059570313e-005,
scale: 4508.9354409599309
}, {
level: 18,
levelValue: 18,
resolution: 5.3644180297851563e-006,
scale: 2254.4677204799655
}, {
level: 19,
levelValue: 19,
resolution: 2.68220901489257815e-006,
scale: 1127.23386023998275
}, {
level: 20,
levelValue: 2,
resolution: 1.341104507446289075e-006,
scale: 563.616930119991375
}
]
});
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
var tiledLayer = new WebTileLayer("http://39.104.61.84:9001/EzServer7/Maps/sltdt/EzMap?Service=getImage&Type=RGB&ZoomOffset=0&Col={col}&Row={row}&Zoom={level}&V=0.3&key=", {
tileInfo: tileInfo
});
// var annomap = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
// subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
// tileInfo: tileInfo
// });
// 作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
});
// 创建地图
var map = new Map({
basemap: tdtBasemap
});
// 创建二维地图
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 12,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [106.72, 26.585]
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-geocoding.html
View file @ 30198240
...@@ -63,6 +63,7 @@ ...@@ -63,6 +63,7 @@
} }
} }
</style> </style>
<script src="https://apaas.wodcloud.com/mapstatic/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script> <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script> <script>
require([ require([
...@@ -79,15 +80,10 @@ ...@@ -79,15 +80,10 @@
"esri/symbols/PictureMarkerSymbol", "esri/symbols/PictureMarkerSymbol",
"dojo/domReady!" "dojo/domReady!"
], function (Map, Graphic, Basemap, Point, MapView, PopupTemplate, WebTileLayer, GraphicsLayer, MapImageLayer, TileInfo, PictureMarkerSymbol) { ], function (Map, Graphic, Basemap, Point, MapView, PopupTemplate, WebTileLayer, GraphicsLayer, MapImageLayer, TileInfo, PictureMarkerSymbol) {
// 通过瓦片形式加载天地图的
var symbol_warning = new PictureMarkerSymbol("/static/images/marker-red.png", 26, 37); // 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
var pupuptemp = new PopupTemplate({ var tileInfo = new TileInfo({
title:"基础信息",
content:"{formatted_address}"
});
var resultsLayer = new GraphicsLayer();
const tileInfo = new TileInfo({
dpi: 90.71428571427429, //解析度，即像素 dpi: 90.71428571427429, //解析度，即像素
rows: 256, rows: 256,
cols: 256, cols: 256,
...@@ -204,34 +200,34 @@ ...@@ -204,34 +200,34 @@
] ]
}); });
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别 // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
let tiledLayer = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", { var tiledLayer = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"], subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo tileInfo: tileInfo,
spatialReference: {
wkid: 4326
},
}); });
let annomap = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", { var annomap = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"], subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo tileInfo: tileInfo,
});
const tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: { spatialReference: {
wkid: 4326 wkid: 4326
}, },
}); });
const map = new Map({ // 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap"
});
// 创建地图数据
var map = new Map({
basemap: tdtBasemap basemap: tdtBasemap
}); });
map.add(resultsLayer); // 初始化地图视图
var view = new MapView({
const view = new MapView({
map: map, map: map,
container: "viewDiv", container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 14, zoom: 14,
constraints: { constraints: {
lods: tileInfo.lods, lods: tileInfo.lods,
...@@ -239,17 +235,24 @@ ...@@ -239,17 +235,24 @@
}, },
center: [119.892731, 31.007534] //[119.8087, 30.9700] center: [119.892731, 31.007534] //[119.8087, 30.9700]
}); });
// 添加搜索小部件到视图
view.ui.add(search, "top-right"); view.ui.add(search, "top-right");
// 地图中添加绘制图层
//when var symbol_warning = new PictureMarkerSymbol("https://apaas3.wodcloud.com/mapstatic/images/marker-red.png", 26, 37);
view.when(function () { var pupuptemp = new PopupTemplate({
document.getElementById("searchBtn").addEventListener("click", doSearch); title:"基础信息",
}); content:"{formatted_address}"
});
var resultsLayer = new GraphicsLayer();
map.add(resultsLayer);
// 视图加载后操作
view.when(function () {
document.getElementById("searchBtn").addEventListener("click", doSearch);
});
function doSearch() { function doSearch() {
var searchText = document.getElementById("searchText").value; var searchText = document.getElementById("searchText").value;
var key = "d8cea7350e1fdf682d165c698683fd12"; var key = "966cdd04fb6b722679bc24c5d630f04d";
var url = "https://restapi.amap.com/v3/geocode/geo?address="+searchText+"&output=JSON&key=d8cea7350e1fdf682d165c698683fd12"; var url = "https://restapi.amap.com/v3/geocode/geo?address="+searchText+"&output=JSON&key="+key;
$.ajax({ $.ajax({
url: url, url: url,
type: "GET", type: "GET",
...@@ -280,11 +283,10 @@ ...@@ -280,11 +283,10 @@
target: ptPoi target: ptPoi
}, },
{ {
duration: 2000, duration: 500,
easing: "in-out-expo" easing: "in-out-expo"
} }
); );
console.log(coord);
}); });
}, },
...@@ -296,7 +298,6 @@ ...@@ -296,7 +298,6 @@
}); });
</script> </script>
</head> </head>
<body> <body>
<div id="viewDiv"></div> <div id="viewDiv"></div>
<div id="search"> <div id="search">
...@@ -304,5 +305,4 @@ ...@@ -304,5 +305,4 @@
<button id="searchBtn" type="submit">搜索</button> <button id="searchBtn" type="submit">搜索</button>
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
static/view/demo/page-multilayer3search.html
View file @ 30198240
...@@ -205,12 +205,18 @@ ...@@ -205,12 +205,18 @@
var basemap = WebTiledLayer( var basemap = WebTiledLayer(
'http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles', { 'http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles', {
subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'], subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
tileInfo: tileInfo tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
}); });
var annomap = WebTiledLayer( var annomap = WebTiledLayer(
'http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles', { 'http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles', {
subDomains: ['t0', 't1', 't2', 't3', 't4'], subDomains: ['t0', 't1', 't2', 't3', 't4'],
tileInfo: tileInfo tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
}); });
var queryLayer = new ArcGISDynamicMapServiceLayer( var queryLayer = new ArcGISDynamicMapServiceLayer(
"https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer"); "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer");
...@@ -227,9 +233,9 @@ ...@@ -227,9 +233,9 @@
initToolbar(); initToolbar();
//新建查询任务与查询对象 //新建查询任务与查询对象
var qtParcel1 = new QueryTask( var qtParcel1 = new QueryTask(
"https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/1"); "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/FeatureServer/1");
var qParcel1 = new Query(); var qParcel1 = new Query();
var qtArea = new QueryTask("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/10"); var qtArea = new QueryTask("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/FeatureServer/10");
var qArea = new Query(); var qArea = new Query();
//设置查询是否返回几何对象 //设置查询是否返回几何对象
qParcel1.returnGeometry = qArea.returnGeometry = true; qParcel1.returnGeometry = qArea.returnGeometry = true;
...@@ -281,6 +287,7 @@ ...@@ -281,6 +287,7 @@
console.log("query failed."); console.log("query failed.");
} }
} }
console.log(results)
//两次查询的结果 //两次查询的结果
parcel1 = results[0].features; parcel1 = results[0].features;
area = results[1].features; area = results[1].features;
......
static/view/demo/page-multilayersandfeilds_3search.html
View file @ 30198240
...@@ -173,12 +173,18 @@ ...@@ -173,12 +173,18 @@
var basemap = WebTiledLayer( var basemap = WebTiledLayer(
'http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles', { 'http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles', {
subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'], subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
tileInfo: tileInfo tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
}); });
var annomap = WebTiledLayer( var annomap = WebTiledLayer(
'http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles', { 'http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles', {
subDomains: ['t0', 't1', 't2', 't3', 't4'], subDomains: ['t0', 't1', 't2', 't3', 't4'],
tileInfo: tileInfo tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
}); });
var queryLayer = new ArcGISDynamicMapServiceLayer( var queryLayer = new ArcGISDynamicMapServiceLayer(
"https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer"); "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer");
......
static/view/demo/page-pointshine_map.html
View file @ 30198240
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Point Shine Map</title> <title>Point Shine Map</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
<style> <style>
html, html,
body, body,
...@@ -50,13 +51,13 @@ ...@@ -50,13 +51,13 @@
} }
</style> </style>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" /> <script src="https://apaas.wodcloud.com/mapstatic/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script> <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script> <script>
$(function () { $(function () {
require([ require([
"esri/config",
"esri/Map", "esri/Map",
"esri/WebScene", "esri/WebScene",
"esri/geometry/Point", "esri/geometry/Point",
...@@ -64,8 +65,9 @@ ...@@ -64,8 +65,9 @@
"esri/views/MapView", "esri/views/MapView",
"esri/layers/WebTileLayer", "esri/layers/WebTileLayer",
"esri/layers/support/TileInfo", "esri/layers/support/TileInfo",
"esri/layers/FeatureLayer" "esri/layers/FeatureLayer",
], function (Map, WebScene, Point, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer) { "dojo/domReady!"
], function (ESRICONFIG, Map, WebScene, Point, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer) {
// 通过瓦片形式加载天地图的 // 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度 // 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定 // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
...@@ -188,24 +190,33 @@ ...@@ -188,24 +190,33 @@
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别 // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
var tiledLayer = new WebTileLayer( var tiledLayer = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", { "http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"], subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo tileInfo: tileInfo,
}); spatialReference: {
wkid: 4326
}
});
var annomap = new WebTileLayer( var annomap = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", { "http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"], subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo tileInfo: tileInfo,
}); spatialReference: {
wkid: 4326
}
});
// 请求天地图服务跨域的设置
ESRICONFIG.request.corsEnabledServers.push(
"t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
"t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
);
// 使用本地字体文件
ESRICONFIG.fontsUrl = "https://apaas3.wodcloud.com/mapstatic/font";
// 天地图经纬度地图及注记作为底图 // 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({ var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap], baseLayers: [tiledLayer, annomap],
title: "TDT Basemap", title: "TDT Basemap",
id: "tdtBasemap", id: "tdtBasemap"
spatialReference: {
wkid: 4326
},
}); });
var wglayer = new FeatureLayer({ var wglayer = new FeatureLayer({
url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/9" url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/9"
}); });
...@@ -246,16 +257,14 @@ ...@@ -246,16 +257,14 @@
} }
}); });
var highlightSelect, highlightHover; var highlightSelect, highlightHover,hoverPromise;
var hoverPromise;
wglayer.when(function () { wglayer.when(function () {
var stationLayer = wglayer; var stationLayer = wglayer;
view.whenLayerView(stationLayer).then(function (layerView) { view.whenLayerView(stationLayer).then(function (layerView) {
var queryStations = stationLayer.createQuery(); var queryStations = stationLayer.createQuery();
var buttons = document.querySelectorAll("button"); var buttons = document.querySelectorAll("button");
for (var i = 0, button = null; for (var i = 0, button = null;(button = buttons[i]); i++) {
(button = buttons[i]); i++) {
button.addEventListener("click", onClick); button.addEventListener("click", onClick);
button.addEventListener("mouseover", onMouseOver); button.addEventListener("mouseover", onMouseOver);
button.addEventListener("mouseout", onMouseOut); button.addEventListener("mouseout", onMouseOut);
...@@ -264,8 +273,6 @@ ...@@ -264,8 +273,6 @@
function onClick(event) { function onClick(event) {
queryStations.where = "WGMC LIKE'%" + event.target.innerText + "%'"; queryStations.where = "WGMC LIKE'%" + event.target.innerText + "%'";
stationLayer.queryFeatures(queryStations).then(function (result) { stationLayer.queryFeatures(queryStations).then(function (result) {
console.log(result);
if (highlightSelect) { if (highlightSelect) {
highlightSelect.remove(); highlightSelect.remove();
} }
...@@ -295,7 +302,6 @@ ...@@ -295,7 +302,6 @@
}); });
}); });
</script> </script>
</head> </head>
......
static/view/demo/page-simplesearch.html
View file @ 30198240
...@@ -40,6 +40,7 @@ ...@@ -40,6 +40,7 @@
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script> <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script> <script>
require([ require([
"esri/config",
"esri/Map", "esri/Map",
"esri/Basemap", "esri/Basemap",
"esri/views/MapView", "esri/views/MapView",
...@@ -50,7 +51,10 @@ ...@@ -50,7 +51,10 @@
"esri/tasks/support/Query", "esri/tasks/support/Query",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleMarkerSymbol",
"esri/geometry/Point" "esri/geometry/Point"
], function (Map, Basemap, MapView, WebTileLayer, TileInfo, GraphicsLayer, QueryTask, Query, SimpleMarkerSymbol, Point) { ], function (ESRICONFIG, Map, Basemap, MapView, WebTileLayer, TileInfo, GraphicsLayer, QueryTask, Query, SimpleMarkerSymbol, Point) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
var tileInfo = new TileInfo({ var tileInfo = new TileInfo({
dpi: 90.71428571427429, //解析度，即像素 dpi: 90.71428571427429, //解析度，即像素
rows: 256, rows: 256,
...@@ -170,22 +174,32 @@ ...@@ -170,22 +174,32 @@
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别 // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
var tiledLayer = new WebTileLayer( var tiledLayer = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", { "http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"], subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo tileInfo: tileInfo,
}); spatialReference: {
wkid: 4326
}
});
var annomap = new WebTileLayer( var annomap = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", { "http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"], subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo tileInfo: tileInfo,
}); spatialReference: {
wkid: 4326
}
});
// 请求天地图服务跨域的设置
ESRICONFIG.request.corsEnabledServers.push(
"t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
"t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
);
// 使用本地字体文件
ESRICONFIG.fontsUrl = "https://apaas.wodcloud.com/mapstatic/font";
// 天地图经纬度地图及注记作为底图 // 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({ var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap], baseLayers: [tiledLayer, annomap],
title: "TDT Basemap", title: "TDT Basemap",
id: "tdtBasemap", id: "tdtBasemap"
spatialReference: {
wkid: 4326
},
}); });
var peaksUrl = var peaksUrl =
"https://apaasgis.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer/2"; "https://apaasgis.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer/2";
...@@ -221,9 +235,6 @@ ...@@ -221,9 +235,6 @@
var view = new MapView({ var view = new MapView({
map: map, map: map,
container: "viewDiv", container: "viewDiv",
spatialReference: {
wkid: 4326
},
center: [107, 27], center: [107, 27],
zoom: 9, zoom: 9,
constraints: { constraints: {
......
static/view/demo/page-sliderZoom.html
View file @ 30198240
...@@ -28,10 +28,9 @@ ...@@ -28,10 +28,9 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
</style> </style>
<script src="https://apaas.wodcloud.com/mapstatic/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script> <script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script> <script>
require([ require([
...@@ -164,22 +163,25 @@ ...@@ -164,22 +163,25 @@
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别 // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
var tiledLayer = new WebTileLayer( var tiledLayer = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", { "http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"], subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo tileInfo: tileInfo,
}); spatialReference: {
wkid: 4326
}
});
var annomap = new WebTileLayer( var annomap = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", { "http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"], subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo tileInfo: tileInfo,
}); spatialReference: {
wkid: 4326
}
});
// 天地图经纬度地图及注记作为底图 // 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({ var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap], baseLayers: [tiledLayer, annomap],
title: "TDT Basemap", title: "TDT Basemap",
id: "tdtBasemap", id: "tdtBasemap"
spatialReference: {
wkid: 4326
},
}); });
// 创建地图 // 创建地图
var map = new Map({ var map = new Map({
...@@ -189,9 +191,6 @@ ...@@ -189,9 +191,6 @@
var view = new MapView({ var view = new MapView({
map: map, map: map,
container: "viewDiv", container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 12, zoom: 12,
constraints: { constraints: {
lods: tileInfo.lods, lods: tileInfo.lods,
...@@ -201,10 +200,10 @@ ...@@ -201,10 +200,10 @@
}, },
center: [106.72, 26.585] center: [106.72, 26.585]
}); });
// 滑块控制地图级别
var zoomSlider = document.getElementById("zoom"); var zoomSlider = document.getElementById("zoom");
var showZoom = document.getElementById("zoom-value"); var showZoom = document.getElementById("zoom-value");
view.when(function () { view.when(function () {
console.log(view);
zoomSlider.min = view.constraints.minZoom; zoomSlider.min = view.constraints.minZoom;
zoomSlider.max = view.constraints.maxZoom; zoomSlider.max = view.constraints.maxZoom;
zoomSlider.value = showZoom.innerText = view.zoom; zoomSlider.value = showZoom.innerText = view.zoom;
...@@ -236,4 +235,4 @@ ...@@ -236,4 +235,4 @@
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
static/view/demo/page-video_web_map.html
View file @ 30198240
...@@ -33,9 +33,11 @@ ...@@ -33,9 +33,11 @@
"esri/WebMap" "esri/WebMap"
], function(esriConfig, MapView, WebMap) { ], function(esriConfig, MapView, WebMap) {
esriConfig.portalUrl = "https://apaasgis.wodcloud.com/portal"; esriConfig.portalUrl = "https://apaasgis.wodcloud.com/portal";
// 使用本地字体文件
esriConfig.fontsUrl = "https://apaas.wodcloud.com/mapstatic/font";
var webmap = new WebMap({ var webmap = new WebMap({
portalItem: { portalItem: {
id: "4731db60e99b47c3aed258d488963986" id: "b4f4797eb32342c5b679082bfbbef553"
} }
}); });
...@@ -48,6 +50,7 @@ ...@@ -48,6 +50,7 @@
view.popup.watch("selectedFeature", function(graphic) { view.popup.watch("selectedFeature", function(graphic) {
if (graphic && graphic.sourceLayer) { if (graphic && graphic.sourceLayer) {
var layerName = graphic.sourceLayer.title; var layerName = graphic.sourceLayer.title;
console(graphic.sourceLayer)
switch (layerName) { switch (layerName) {
case "贵州视频监控要素微服务": case "贵州视频监控要素微服务":
var name = graphic.attributes.NAME; var name = graphic.attributes.NAME;
...@@ -67,13 +70,13 @@ ...@@ -67,13 +70,13 @@
}); });
}); });
function setContentInfo(code) { function setContentInfo(code) {
var videoDomain = "https://dl.wodcloud.com/video/{0}.mp4"; var videoDomain = "https://apaas3.wodcloud.com/mapstatic/video/{0}.mp4";
var videoCode = code; var videoCode = code;
var videoSrc = undefined; var videoSrc = undefined;
if (videoCode) { if (videoCode) {
videoSrc = videoDomain.replace("{0}", videoCode); videoSrc = videoDomain.replace("{0}", videoCode);
} }
return "<iframe id='cameraiframe' src='../../iframe/videoplay4test.html?camlist=" + videoCode + "&videosrc=" + videoSrc + return "<iframe id='cameraiframe' src='https://apaas3.wodcloud.com/mapstatic/iframe/videoplay4test.html?camlist=" + videoCode + "&videosrc=" + videoSrc +
"&width=476&height=314' name='cameraiframe' frameborder='0' style='width: 476px;height: 314px; overflow: hidden; border:0px;'></iframe>"; "&width=476&height=314' name='cameraiframe' frameborder='0' style='width: 476px;height: 314px; overflow: hidden; border:0px;'></iframe>";
}; };
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment