Skip to content

A
apaas-ui
Commit 35df4076 authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

Merge branch 'dev' into ldx

parents 18a5f1e2 ff546d6b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 684 additions and 1670 deletions
src/pages/workbench/fwgl/serviceDetail.vue
View file @ 35df4076
......@@ -1366,8 +1366,8 @@ export default {
this.perception_in = false
}
console.log(this.process_in_up,this.perception_in);
if(this.process_in_up){
this.get_trans_data()
if(this.process_in_up){
var temp_sj = this.service_header_arr.first.pop()
this.service_header_arr.second = []
this.service_header_arr.second.push(temp_sj)
......
static/view/data/arcgisTreeNode.json
View file @ 35df4076
......@@ -3,6 +3,11 @@
{
"label": "arcgis server 地图示例",
"children": [
{
"label": "基础地图",
"name": "basic_web_map",
"branch": "arcgis_latest"
},
{
"label": "二维地图",
"name": "2d_base_map",
......@@ -18,31 +23,6 @@
"name": "2dto3d",
"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": "地图级别控件",
"name": "sliderZoom",
......@@ -58,34 +38,19 @@
"name": "geocoding",
"branch": "arcgis_latest"
},
{
"label": "缓冲区服务与空间分析",
"name": "linebuffer",
"branch": "arcgis_latest"
},
{
"label": "人员轨迹查询",
"name": "peoplecluster",
"branch": "arcgis_latest"
},
{
"label": "高亮图层要素",
"name": "pointshine_map",
"branch": "arcgis_latest"
},
{
"label": "天地图_WMTS",
"name": "tdt_wmts_map",
"branch": "arcgis_latest"
},
{
"label": "方正_WMTS",
"name": "fz_map",
"label": "ArcGIS_WMTS",
"name": "arcgis_wmts",
"branch": "arcgis_latest"
},
{
"label": "Geoserver_WMTS服务",
"name": "arcgis_load_geoserver_wmts",
"label": "Mapbox_WMTS服务",
"name": "arcgis_load_mapbox_wmts",
"branch": "arcgis_latest"
},
{
......@@ -98,11 +63,6 @@
"name": "multilayer3search",
"branch": "arcgis_latest"
},
{
"label": "多图层属性查询",
"name": "multilayer4search",
"branch": "arcgis_latest"
},
{
"label": "通用多图层多字段查询",
"name": "multilayersandfeilds_3search",
......@@ -143,6 +103,16 @@
"name": "migrate2",
"branch": "arcgis_latest"
},
{
"label": "二维地图之加载csv数据源",
"name": "2d_csvlayer",
"branch": "arcgis_latest"
},
{
"label": "三维地图之加载csv数据源",
"name": "3d_csvlayer",
"branch": "arcgis_latest"
},
{
"label": "公交线路图",
"name": "bus_line",
......
static/view/demo/page-2d_base_map.html
View file @ 35df4076
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>2D Base Map</title>
......@@ -19,13 +19,40 @@
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/MapView"
], 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({
basemap: "streets"
basemap: basemap
});
// 初始化二维视图
var view = new MapView({
container: "viewDiv",
map: map,
......@@ -35,6 +62,7 @@
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
......
static/view/demo/page-2d_csvlayer.html
View file @ 35df4076
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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">
<style>
html,
......@@ -28,7 +29,8 @@
"esri/layers/CSVLayer",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color"
"esri/Color",
"dojo/domReady!"
], function (Map, Basemap, MapView, WebTileLayer, TileInfo, CSVLayer, SimpleRenderer, SimpleMarkerSymbol, Color) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
......@@ -152,24 +154,26 @@
// 在加载经纬度地图的时候我们需要使用 {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
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", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
},
});
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
id: "tdtBasemap"
});
// 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 = {
title: "Weather Observation Station",
content: " {province} {st_name} on {ele} with id {stid}."
......@@ -188,14 +192,13 @@
symbol: {
type: "simple-marker",
size: 8,
color: [245,125,33],
color: [245, 125, 33],
outline: {
width: 1,
color: "white"
}
}
};
// 创建地图数据
var map = new Map({
basemap: tdtBasemap,
......@@ -205,9 +208,6 @@
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 4,
constraints: {
lods: tileInfo.lods,
......
static/view/demo/page-2d_loadjson.html deleted 100644 → 0
View file @ 18a5f1e2
<!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 @ 18a5f1e2
This diff is collapsed.
static/view/demo/page-2dto3d.html
View file @ 35df4076
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
......@@ -15,13 +14,11 @@
height: 100%;
width: 100%;
}
#infoDiv {
position: absolute;
top: 15px;
left: 60px;
}
#infoDiv input {
border: none;
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
......@@ -31,12 +28,13 @@
<script>
require([
"esri/config",
"esri/layers/WebTileLayer",
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/views/SceneView",
"esri/layers/WebTileLayer",
"dojo/domReady!"
], function (ESRICONFIG, WebTileLayer, Map, MapView, SceneView) {
], function (ESRICONFIG, Map, Basemap, MapView, SceneView, WebTileLayer) {
// 通过瓦片形式加载天地图
// 天地图根据投影分为两种：墨卡托和经纬度，在3D视图中使用Web墨卡托投影
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
......@@ -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}",
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 switchButton = document.getElementById("switch-btn");
//统一管理页面中的地图视图
// 统一管理页面中的地图视图
var appConfig = {
mapView: null, //2D视图
sceneView: null, //3D视图
activeView: null, //当前显示的视图
container: "viewDiv"
};
//视图初始设置，缩放等级，中心
// 视图初始设置，缩放等级，中心
var initialViewParams = {
zoom: 5,
center: [114, 30],
container: appConfig.container
};
//同一个地图数据资源
// 初始化地图
var map = new Map({
ground: "world-elevation"
basemap: basemap
});
map.layers.add(tiledLayer);
map.layers.add(annolayer);
//创建2D视图
appConfig.mapView = createView(initialViewParams, "2d");
appConfig.mapView.map = map;
appConfig.activeView = appConfig.mapView;
// 创建3D视图
initialViewParams.container = null; //初始状况不显示3D视图
initialViewParams.map = map;
appConfig.sceneView = createView(initialViewParams, "3d");
// 转换按钮
switchButton.addEventListener("click", function () {
switchView();
});
function switchView() {
//判断当前视图是否是3D视图
var is3D = appConfig.activeView.type === "3d";
var activeViewpoint = appConfig.activeView.viewpoint.clone();
//移除当前视图
appConfig.activeView.container = null;
if (is3D) {
// 如果是3D视图，就将其转换为2D视图
appConfig.mapView.viewpoint = activeViewpoint;
......@@ -114,7 +108,6 @@
switchButton.value = "2D";
}
}
//创建2D和3D视图
function createView(params, type) {
var view;
......@@ -128,10 +121,8 @@
return view;
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="infoDiv">
......@@ -139,5 +130,4 @@
value="3D" />
</div>
</body>
</html>
static/view/demo/page-3d_base_map.html
View file @ 35df4076
......@@ -19,13 +19,14 @@
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/Basemap",
"esri/views/SceneView",
"esri/layers/WebTileLayer",
"esri/config",
"esri/geometry/Point",
"dojo/domReady!"
], function (Map, SceneView, WebTileLayer, ESRICONFIG, Point) {
], function (ESRICONFIG,Map, Basemap, SceneView, WebTileLayer, Point) {
// 通过瓦片形式加载天地图
// 天地图根据投影分为两种：墨卡托和经纬度，在3D视图中使用Web墨卡托投影
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
......@@ -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}",
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({
ground: "world-elevation"
basemap: basemap
});
map.layers.add(tiledLayer);
map.layers.add(annolayer);
// 初始化三维视图
var view = new SceneView({
map: map,
container: "viewDiv",
zoom: 3,
center: [114, 30]
});
var pt = new Point({
// 缩放到特定点
view.when(function() {
setTimeout(view.goTo({
target: new Point({
longitude: 106.7,
latitude: 26.6
});
view.whenLayerView(tiledLayer,annolayer).then(function() {
setTimeout(view.goTo({
target: pt,
}),
zoom: 10,
tilt: 0,
heading: 0
}), 4000)
})
});
</script>
</head>
......
static/view/demo/page-3d_csvlayer.html
View file @ 35df4076
......@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8" />
<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">
<style>
html,
......@@ -16,20 +16,21 @@
width: 100%;
}
</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>
require([
"esri/config",
"esri/layers/WebTileLayer",
"esri/Map",
"esri/Basemap",
"esri/views/SceneView",
"esri/layers/WebTileLayer",
"esri/layers/CSVLayer",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color",
"dojo/domReady!"
], function (ESRICONFIG, WebTileLayer, Map, SceneView, CSVLayer, SimpleRenderer, SimpleMarkerSymbol, Color) {
], function (ESRICONFIG, Map, Basemap, SceneView, WebTileLayer, CSVLayer, SimpleRenderer, SimpleMarkerSymbol, Color) {
// 通过瓦片形式加载天地图
// 天地图根据投影分为两种：墨卡托和经纬度，在3D视图中使用Web墨卡托投影
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
......@@ -41,32 +42,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}",
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"
);
var url =
"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv";
var url = "https://apaas.wodcloud.com/mapsamples/static/data/stations.csv";
var template = {
title: "Weather Observation Station",
content: " {province} {st_name} on {ele} with id {stid}."
};
// 初始化天地图-Web墨卡托投影底图
var basemap = new Basemap({
id: "tdt",
title: "天地图-Web墨卡托",
baseLayers: [tiledLayer, annolayer]
})
// 初始化地图
var map = new Map({
basemap: basemap
});
// 初始化三维视图
var view = new SceneView({
container: "viewDiv",
center: [108.3, 33.9],
zoom: 4,
map: map
});
// 添加csv图层
var url = "https://apaas3.wodcloud.com/mapstatic/data/stations.csv";
var csvLayer = new CSVLayer({
url: url,
copyright: "big-data",
popupTemplate: template,
popupTemplate: {
title: "Weather Observation Station",
content: " {province} {st_name} on {ele} with id {stid}."
},
elevationInfo: {
//在地球表面放置
mode: "on-the-ground"
}
});
csvLayer.renderer = {
mode: "on-the-ground" //在地球表面放置
},
renderer: {
type: "simple", //渲染的类型
symbol: {
type: "point-3d", //要素为3D点
......@@ -82,23 +92,10 @@
size: "12px"
}]
}
};
var map = new Map({
ground: "world-elevation"
}
});
map.layers.add(tiledLayer);
map.layers.add(annolayer);
map.layers.add(csvLayer);
var view = new SceneView({
container: "viewDiv",
center: [108.3, 33.9],
zoom: 4,
map: map
});
});
</script>
</head>
......
static/view/demo/page-arcgis_load_geoserver_wmts.html deleted 100644 → 0
View file @ 18a5f1e2
This diff is collapsed.
static/view/demo/page-arcgis_load_mapbox_wmts.html 0 → 100644
View file @ 35df4076
<!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 @ 35df4076
<!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 @ 35df4076
......@@ -24,10 +24,10 @@
"esri/WebMap"
], function(esriConfig, MapView, WebMap) {
//使用portal门户的地图资源
esriConfig.portalUrl = "https://apaasgis.wodcloud.com/arcgis";
esriConfig.portalUrl = "https://apaasgis.wodcloud.com/portal";
var webmap = new WebMap({
portalItem: {
id: "54a708b3890a4d1aaff37988697aeaec"
id: "aa912ada83904d7c901066673ee1a5aa"
}
});
......
static/view/demo/page-featurelayer.html
View file @ 35df4076
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>从要素图层中查询</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
<style>
html,
body,
#sceneDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.panel-container {
position: relative;
width: 100%;
height: 100%;
}
.panel-side {
padding: 2px;
box-sizing: border-box;
width: 300px;
height: 100%;
position: absolute;
top: 0;
right: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
overflow: auto;
z-index: 60;
}
.panel-side h3 {
padding: 0 20px;
margin: 20px 0;
}
.panel-side ul {
list-style: none;
margin: 0;
padding: 0;
}
.panel-side li {
list-style: none;
padding: 10px 20px;
}
.panel-result {
cursor: pointer;
margin: 2px 0;
background-color: rgba(0, 0, 0, 0.3);
}
.panel-result:hover,
.panel-result:focus {
color: orange;
background-color: rgba(0, 0, 0, 0.75);
}
</style>
</head>
<body>
<div class="panel-container">
<div class="panel-side">
<h3>网吧终端</h3>
<ul id="nyc_graphics">
<li>Loading&hellip;</li>
</ul>
</div>
<div id="sceneDiv"></div>
</div>
</body>
<script>
require([
"esri/config",
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/layers/FeatureLayer",
], function (Map, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer) {
"esri/layers/FeatureLayer",,
"dojo/domReady!"
], function (ESRICONFIG, Map, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
......@@ -141,32 +203,41 @@
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
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", {
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({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
id: "tdtBasemap"
});
const map = new Map({
// 初始化地图
var map = new Map({
basemap: tdtBasemap
});
const view = new MapView({
// 初始化地图视图
var view = new MapView({
map: map,
container: "sceneDiv",
spatialReference: {
wkid: 4326
},
zoom: 14,
zoom: 12,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
......@@ -176,47 +247,40 @@
right: 300
}
});
const listNode = document.getElementById("nyc_graphics");
const popupTemplate = {
title: "{NAME}",
// 添加要素地图服务
var listNode = document.getElementById("nyc_graphics");
var popupTemplate = {
title: "{name}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "ADRESS",
label: "地址",
fieldName: "x",
label: "经度",
format: {
places: 0,
places: 6,
digitSeparator: true
}
},{
fieldName: "SSQY",
label: "所属区域",
}, {
fieldName: "y",
label: "纬度",
format: {
places: 0,
places: 6,
digitSeparator: true
}
}]
}]
};
const featureLayer = new FeatureLayer({
url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/3",
var featureLayer = new FeatureLayer({
url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_STATION/FeatureServer/0",
outFields: ["*"],
popupTemplate: popupTemplate,
});
map.add(featureLayer);
let graphics;
var graphics = null;
//加载完成要素图层
view.whenLayerView(featureLayer).then(function (layerView) {
layerView.watch("updating", function (value) {
if (!value) {
layerView
.queryFeatures({
geometry: view.extent,
......@@ -224,40 +288,34 @@
})
.then(function (results) {
graphics = results.features;
const fragment = document.createDocumentFragment();
var fragment = document.createDocumentFragment();
graphics.forEach(function (result, index) {
const attributes = result.attributes;
const name = attributes.NAME;
const li = document.createElement("li");
var attributes = result.attributes;
var name = attributes.name;
var li = document.createElement("li");
li.classList.add("panel-result");
li.tabIndex = 0;
li.setAttribute("data-result-id", index);
li.textContent = name;
fragment.appendChild(li);
});
listNode.innerHTML = "";
listNode.appendChild(fragment);
})
.catch(function (error) {
console.error("query failed: ", error);
alert("query failed: ", error);
});
}
});
});
// 监听列表点击事件
listNode.addEventListener("click", onListClickHandler);
function onListClickHandler(event) {
const target = event.target;
const resultId = target.getAttribute("data-result-id");
const result =
var target = event.target;
var resultId = target.getAttribute("data-result-id");
var result =
resultId && graphics && graphics[parseInt(resultId, 10)];
if (result) {
console.log(result)
view.goTo(result.geometry).then(function () {
view.popup.open({
features: [result],
......@@ -267,81 +325,5 @@
}
}
});
</script>
<style>
html,
body,
#sceneDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.panel-container {
position: relative;
width: 100%;
height: 100%;
}
.panel-side {
padding: 2px;
box-sizing: border-box;
width: 300px;
height: 100%;
position: absolute;
top: 0;
right: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
overflow: auto;
z-index: 60;
}
.panel-side h3 {
padding: 0 20px;
margin: 20px 0;
}
.panel-side ul {
list-style: none;
margin: 0;
padding: 0;
}
.panel-side li {
list-style: none;
padding: 10px 20px;
}
.panel-result {
cursor: pointer;
margin: 2px 0;
background-color: rgba(0, 0, 0, 0.3);
}
.panel-result:hover,
.panel-result:focus {
color: orange;
background-color: rgba(0, 0, 0, 0.75);
}
</style>
</head>
<body>
<div class="panel-container">
<div class="panel-side">
<h3>网吧终端</h3>
<ul id="nyc_graphics">
<li>Loading&hellip;</li>
</ul>
</div>
<div id="sceneDiv"></div>
</div>
</body>
</script>
</html>
\ No newline at end of file
static/view/demo/page-fz_map.html deleted 100644 → 0
View file @ 18a5f1e2
<!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 @ 35df4076
......@@ -63,6 +63,7 @@
}
}
</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>
require([
......@@ -79,15 +80,10 @@
"esri/symbols/PictureMarkerSymbol",
"dojo/domReady!"
], 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({
title:"基础信息",
content:"{formatted_address}"
});
var resultsLayer = new GraphicsLayer();
const tileInfo = new TileInfo({
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
var tileInfo = new TileInfo({
dpi: 90.71428571427429, //解析度，即像素
rows: 256,
cols: 256,
......@@ -204,34 +200,34 @@
]
});
// 在加载经纬度地图的时候我们需要使用 {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"],
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"],
tileInfo: tileInfo
});
const tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
},
});
const map = new Map({
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap"
});
// 创建地图数据
var map = new Map({
basemap: tdtBasemap
});
map.add(resultsLayer);
const view = new MapView({
// 初始化地图视图
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 14,
constraints: {
lods: tileInfo.lods,
......@@ -239,17 +235,24 @@
},
center: [119.892731, 31.007534] //[119.8087, 30.9700]
});
// 添加搜索小部件到视图
view.ui.add(search, "top-right");
//when
// 地图中添加绘制图层
var symbol_warning = new PictureMarkerSymbol("https://apaas3.wodcloud.com/mapstatic/images/marker-red.png", 26, 37);
var pupuptemp = new PopupTemplate({
title:"基础信息",
content:"{formatted_address}"
});
var resultsLayer = new GraphicsLayer();
map.add(resultsLayer);
// 视图加载后操作
view.when(function () {
document.getElementById("searchBtn").addEventListener("click", doSearch);
});
function doSearch() {
var searchText = document.getElementById("searchText").value;
var key = "d8cea7350e1fdf682d165c698683fd12";
var url = "https://restapi.amap.com/v3/geocode/geo?address="+searchText+"&output=JSON&key=d8cea7350e1fdf682d165c698683fd12";
var key = "966cdd04fb6b722679bc24c5d630f04d";
var url = "https://restapi.amap.com/v3/geocode/geo?address="+searchText+"&output=JSON&key="+key;
$.ajax({
url: url,
type: "GET",
......@@ -280,11 +283,10 @@
target: ptPoi
},
{
duration: 2000,
duration: 500,
easing: "in-out-expo"
}
);
console.log(coord);
});
},
......@@ -296,7 +298,6 @@
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="search">
......@@ -304,5 +305,4 @@
<button id="searchBtn" type="submit">搜索</button>
</div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-multilayer3search.html
View file @ 35df4076
......@@ -205,12 +205,18 @@
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', {
subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
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', {
subDomains: ['t0', 't1', 't2', 't3', 't4'],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
var queryLayer = new ArcGISDynamicMapServiceLayer(
"https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer");
......@@ -227,9 +233,9 @@
initToolbar();
//新建查询任务与查询对象
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 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();
//设置查询是否返回几何对象
qParcel1.returnGeometry = qArea.returnGeometry = true;
......@@ -281,6 +287,7 @@
console.log("query failed.");
}
}
console.log(results)
//两次查询的结果
parcel1 = results[0].features;
area = results[1].features;
......
static/view/demo/page-multilayersandfeilds_3search.html
View file @ 35df4076
......@@ -173,12 +173,18 @@
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', {
subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
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', {
subDomains: ['t0', 't1', 't2', 't3', 't4'],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
var queryLayer = new ArcGISDynamicMapServiceLayer(
"https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer");
......
static/view/demo/page-pointshine_map.html
View file @ 35df4076
......@@ -5,6 +5,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Point Shine Map</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
<style>
html,
body,
......@@ -50,13 +51,13 @@
}
</style>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<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>
$(function () {
require([
"esri/config",
"esri/Map",
"esri/WebScene",
"esri/geometry/Point",
......@@ -64,8 +65,9 @@
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/layers/FeatureLayer"
], function (Map, WebScene, Point, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer) {
"esri/layers/FeatureLayer",
"dojo/domReady!"
], function (ESRICONFIG, Map, WebScene, Point, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
......@@ -189,23 +191,32 @@
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
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", {
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({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
id: "tdtBasemap"
});
var wglayer = new FeatureLayer({
url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/9"
});
......@@ -246,16 +257,14 @@
}
});
var highlightSelect, highlightHover;
var hoverPromise;
var highlightSelect, highlightHover,hoverPromise;
wglayer.when(function () {
var stationLayer = wglayer;
view.whenLayerView(stationLayer).then(function (layerView) {
var queryStations = stationLayer.createQuery();
var buttons = document.querySelectorAll("button");
for (var i = 0, button = null;
(button = buttons[i]); i++) {
for (var i = 0, button = null;(button = buttons[i]); i++) {
button.addEventListener("click", onClick);
button.addEventListener("mouseover", onMouseOver);
button.addEventListener("mouseout", onMouseOut);
......@@ -264,8 +273,6 @@
function onClick(event) {
queryStations.where = "WGMC LIKE'%" + event.target.innerText + "%'";
stationLayer.queryFeatures(queryStations).then(function (result) {
console.log(result);
if (highlightSelect) {
highlightSelect.remove();
}
......@@ -295,7 +302,6 @@
});
});
</script>
</head>
......
static/view/demo/page-simplesearch.html
View file @ 35df4076
......@@ -40,6 +40,7 @@
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
......@@ -50,7 +51,10 @@
"esri/tasks/support/Query",
"esri/symbols/SimpleMarkerSymbol",
"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({
dpi: 90.71428571427429, //解析度，即像素
rows: 256,
......@@ -171,21 +175,31 @@
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
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", {
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({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
id: "tdtBasemap"
});
var peaksUrl =
"https://apaasgis.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer/2";
......@@ -221,9 +235,6 @@
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
center: [107, 27],
zoom: 9,
constraints: {
......
static/view/demo/page-sliderZoom.html
View file @ 35df4076
......@@ -28,10 +28,9 @@
justify-content: center;
align-items: center;
}
</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/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script>
require([
......@@ -165,21 +164,24 @@
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
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", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
id: "tdtBasemap"
});
// 创建地图
var map = new Map({
......@@ -189,9 +191,6 @@
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 12,
constraints: {
lods: tileInfo.lods,
......@@ -201,10 +200,10 @@
},
center: [106.72, 26.585]
});
// 滑块控制地图级别
var zoomSlider = document.getElementById("zoom");
var showZoom = document.getElementById("zoom-value");
view.when(function () {
console.log(view);
zoomSlider.min = view.constraints.minZoom;
zoomSlider.max = view.constraints.maxZoom;
zoomSlider.value = showZoom.innerText = view.zoom;
......
static/view/demo/page-video_web_map.html
View file @ 35df4076
......@@ -33,9 +33,11 @@
"esri/WebMap"
], function(esriConfig, MapView, WebMap) {
esriConfig.portalUrl = "https://apaasgis.wodcloud.com/portal";
// 使用本地字体文件
esriConfig.fontsUrl = "https://apaas.wodcloud.com/mapstatic/font";
var webmap = new WebMap({
portalItem: {
id: "4731db60e99b47c3aed258d488963986"
id: "b4f4797eb32342c5b679082bfbbef553"
}
});
......@@ -48,6 +50,7 @@
view.popup.watch("selectedFeature", function(graphic) {
if (graphic && graphic.sourceLayer) {
var layerName = graphic.sourceLayer.title;
console(graphic.sourceLayer)
switch (layerName) {
case "贵州视频监控要素微服务":
var name = graphic.attributes.NAME;
......@@ -67,13 +70,13 @@
});
});
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 videoSrc = undefined;
if (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>";
};
});
......
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