Skip to content

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

完成示例中心demo修改

parent ff546d6b
Hide whitespace changes
Inline Side-by-side
Showing with 881 additions and 466 deletions
static/view/data/arcgisTreeNode.json
View file @ a09d2c4c
...@@ -78,21 +78,11 @@ ...@@ -78,21 +78,11 @@
"name": "echarts_web_map", "name": "echarts_web_map",
"branch": "arcgis_latest" "branch": "arcgis_latest"
}, },
{
"label": "Webmap test",
"name": "webmap_test",
"branch": "arcgis_latest"
},
{ {
"label": "热力图", "label": "热力图",
"name": "heatmap", "name": "heatmap",
"branch": "arcgis_latest" "branch": "arcgis_latest"
}, },
{
"label": "图层管理",
"name": "manage_layers",
"branch": "arcgis_latest"
},
{ {
"label": "迁徙图", "label": "迁徙图",
"name": "migrate", "name": "migrate",
...@@ -118,60 +108,10 @@ ...@@ -118,60 +108,10 @@
"name": "bus_line", "name": "bus_line",
"branch": "arcgis_latest" "branch": "arcgis_latest"
}, },
{
"label": "点聚合图",
"name": "flareClusterLayer",
"branch": "arcgis_latest"
},
{
"label": "运动图层",
"name": "movinglayer",
"branch": "arcgis_latest"
},
{ {
"label": "3.x运动图层", "label": "3.x运动图层",
"name": "3.xmovelayer", "name": "3.xmovelayer",
"branch": "arcgis_latest" "branch": "arcgis_latest"
},
{
"label": "多图层查询",
"name": "2d_findTaskLayers",
"branch": "arcgis_latest"
},
{
"label": "画框统计",
"name": "2d_queryStatistic",
"branch": "arcgis_latest"
},
{
"label": "视频播放",
"name": "2d_videoView",
"branch": "arcgis_latest"
},
{
"label": "缓冲区分析",
"name": "2d_buffer_analysis",
"branch": "arcgis_latest"
},
{
"label": "加载本地JSON文件/shapefile文件",
"name": "2d_loadGeometry",
"branch": "arcgis_latest"
},
{
"label": "要素编辑",
"name": "editFeatures",
"branch": "arcgis_latest"
},
{
"label": "要素编辑用3.x版本",
"name": "2d_featureEditor3.x",
"branch": "arcgis_latest"
},
{
"label": "要素编辑用3.x版本_贵州",
"name": "2d_featureEditor3.x_guizhou",
"branch": "arcgis_latest"
} }
] ]
} }
......
static/view/demo/page-3.xmovelayer.html
View file @ a09d2c4c
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</style> </style>
<script src="https://apaas.wodcloud.com/api_3.x/init.js"></script> <script src="https://apaas.wodcloud.com/api_3.x/init.js"></script>
<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> <script>
let map, featureLayer, moveLayer, lineLayer, featureCollection, featureCollection2, selectedGraphics, linesymbol, let map, featureLayer, moveLayer, lineLayer, featureCollection, featureCollection2, selectedGraphics, linesymbol,
selectedLineGraphic, timer, movecounts; selectedLineGraphic, timer, movecounts;
...@@ -206,7 +206,7 @@ ...@@ -206,7 +206,7 @@
"type": "simple", "type": "simple",
"symbol": { "symbol": {
"type": "esriPMS", "type": "esriPMS",
"url": "https://apaas.wodcloud.com/mapsamples/static/images/ic_wxhuoche.png", "url": "https://apaas3.wodcloud.com/mapstatic/images/ic_wxhuoche.png",
"contentType": "image/png", "contentType": "image/png",
"width": 15, "width": 15,
"height": 15 "height": 15
...@@ -281,7 +281,7 @@ ...@@ -281,7 +281,7 @@
// map.graphics.add(polylineGraphic); // map.graphics.add(polylineGraphic);
$.get( $.get(
"https://apaas.wodcloud.com/mapsamples/static/data/mapLocation.json", "https://apaas3.wodcloud.com/mapstatic/data/mapLocation.json",
function (data) { function (data) {
var features = []; var features = [];
array.forEach(data.features, function (feature) { array.forEach(data.features, function (feature) {
...@@ -320,8 +320,6 @@ ...@@ -320,8 +320,6 @@
function selectInMap(response) { function selectInMap(response) {
var features = []; var features = [];
console.log(response.features);
//深拷贝 //深拷贝
array.forEach(response.features, function (feature) { array.forEach(response.features, function (feature) {
var attr = {}; var attr = {};
...@@ -332,10 +330,6 @@ ...@@ -332,10 +330,6 @@
graphic.setAttributes(attr); graphic.setAttributes(attr);
features.push(graphic); features.push(graphic);
}); });
// var features = response.features;
console.log(features);
map.removeLayer(moveLayer); map.removeLayer(moveLayer);
map.removeLayer(lineLayer); map.removeLayer(lineLayer);
moveLayer = new FeatureLayer(featureCollection, { moveLayer = new FeatureLayer(featureCollection, {
......
static/view/demo/page-bus_line.html
View file @ a09d2c4c
...@@ -29,41 +29,173 @@ ...@@ -29,41 +29,173 @@
</style> </style>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/echarts.min.js"></script> <script src="https://apaas3.wodcloud.com/mapstatic/js/echarts.min.js"></script>
<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">
<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 src="https://apaas3.wodcloud.com/mapstatic/js/jquery-3.3.1.min.js"></script>
<script> <script>
var map, view, option; var map, view, option;
require([ require([
"esri/config",
"esri/Map", "esri/Map",
"esri/Basemap", "esri/Basemap",
"https://apaas.wodcloud.com/mapsamples/static/js/4EchartsLayer.js", "https://apaas3.wodcloud.com/mapstatic/js/4EchartsLayer.js",
"esri/views/MapView", "esri/views/MapView",
"esri/layers/WebTileLayer", "esri/layers/WebTileLayer",
"esri/layers/support/TileInfo", "esri/layers/support/TileInfo",
"dojo/domReady!" "dojo/domReady!"
], function ( ], function (
Map, Basemap, echartsLayer, MapView, WebTileLayer, TileInfo ESRICONFIG, Map, Basemap, echartsLayer, MapView, WebTileLayer, TileInfo
) { ) {
// 通过瓦片形式加载天地图的 // 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度 // 天地图根据投影分为两种：墨卡托和经纬度
let tiledlayer = new WebTileLayer({ // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
urlTemplate: var tileInfo = new TileInfo({
"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}", dpi: 90.71428571427429, //解析度，即像素
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"] 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
}
]
}); });
let annolayer = new WebTileLayer({ // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
urlTemplate: var tiledLayer = new WebTileLayer(
"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}", "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: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
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,
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, annolayer], baseLayers: [tiledLayer, annomap],
title: "TDT Basemap", title: "TDT Basemap",
id: "tdtBasemap", id: "tdtBasemap"
}); });
// 创建地图 // 创建地图
map = new Map({ map = new Map({
...@@ -77,7 +209,7 @@ ...@@ -77,7 +209,7 @@
center: [116.3304, 39.8707] center: [116.3304, 39.8707]
}); });
$.get("https://apaas.wodcloud.com/mapsamples/static/data/lines-bus.json", function (data) { $.get("https://apaas3.wodcloud.com/mapstatic/data/lines-bus.json", function (data) {
var hStep = 300 / (data.length - 1); var hStep = 300 / (data.length - 1);
var busLines = [].concat.apply([], data.map(function (busLine, idx) { var busLines = [].concat.apply([], data.map(function (busLine, idx) {
var prevPt; var prevPt;
...@@ -112,8 +244,6 @@ ...@@ -112,8 +244,6 @@
silent: true, silent: true,
lineStyle: { lineStyle: {
normal: { normal: {
// color: '#c23531',
// color: 'rgb(200, 35, 45)',
opacity: 0.2, opacity: 0.2,
width: 1 width: 1
} }
......
static/view/demo/page-echarts_web_map.html
View file @ a09d2c4c
...@@ -31,8 +31,8 @@ ...@@ -31,8 +31,8 @@
height: 170px; height: 170px;
} }
</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/mapsamples/static/js/echarts.min.js"></script> <script src="https://apaas3.wodcloud.com/mapstatic/js/echarts.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([
...@@ -40,10 +40,10 @@ ...@@ -40,10 +40,10 @@
"esri/views/MapView", "esri/views/MapView",
"esri/WebMap" "esri/WebMap"
], function (esriConfig, MapView, WebMap) { ], function (esriConfig, MapView, WebMap) {
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: "b4f4797eb32342c5b679082bfbbef553"
} }
}); });
......
static/view/demo/page-featurelayer.html
View file @ a09d2c4c
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
"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",
"dojo/domReady!" "dojo/domReady!"
], function (ESRICONFIG, Map, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer) { ], function (ESRICONFIG, Map, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer) {
// 通过瓦片形式加载天地图的 // 通过瓦片形式加载天地图的
......
static/view/demo/page-heatmap.html
View file @ a09d2c4c
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8" /> <meta
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
<title>Visualize points with a heatmap - 4.12</title> />
<title>Visualize points with a heatmap - 4.12</title>
<style> <link
html, rel="stylesheet"
body, href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css"
#viewDiv { />
padding: 0; <style>
margin: 0; html,
height: 100%; body,
width: 100%; #viewDiv {
} padding: 0;
margin: 0;
</style> height: 100%;
width: 100%;
<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> </style>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script> <script>
var map, view; var map, view;
require([ require([
"esri/Map", "esri/config",
"esri/Basemap", "esri/Map",
"esri/views/MapView", "esri/Basemap",
"esri/layers/WebTileLayer", "esri/views/MapView",
"esri/layers/support/TileInfo", "esri/layers/WebTileLayer",
"esri/layers/FeatureLayer", "esri/layers/support/TileInfo",
"esri/widgets/Legend", "esri/layers/FeatureLayer",
"esri/widgets/LayerList", "esri/widgets/Legend",
"esri/renderers/smartMapping/creators/heatmap" "esri/widgets/LayerList",
], function (Map, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer, Legend, LayerList, "esri/renderers/smartMapping/creators/heatmap",
heatmapRendererCreator) { ], function(
var tileInfo = new TileInfo({ ESRICONFIG,
dpi: 90.71428571427429, //解析度，即像素 Map,
rows: 256, Basemap,
cols: 256, MapView,
compressionQuality: 0, //压缩像素值 WebTileLayer,
origin: { TileInfo,
x: -180, FeatureLayer,
y: 90 Legend,
}, LayerList,
spatialReference: { heatmapRendererCreator
wkid: 4326 ) {
}, // 通过瓦片形式加载天地图的
lods: [ //定义平铺方案的细节级别数组 // 天地图根据投影分为两种：墨卡托和经纬度
{ // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
level: 1, var tileInfo = new TileInfo({
levelValue: 1, dpi: 90.71428571427429, //解析度，即像素
resolution: 0.703125, rows: 256,
scale: 295497593.05875003 cols: 256,
}, { compressionQuality: 0, //压缩像素值
level: 2, origin: {
levelValue: 2, x: -180,
resolution: 0.3515625, y: 90,
scale: 147748796.52937502 },
}, { spatialReference: {
level: 3, wkid: 4326,
levelValue: 3, },
resolution: 0.17578125, lods: [
scale: 73874398.264687508 //定义平铺方案的细节级别数组
}, { {
level: 4, level: 1,
levelValue: 4, levelValue: 1,
resolution: 0.087890625, resolution: 0.703125,
scale: 36937199.132343754 scale: 295497593.05875003,
}, {
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
},
});
const template = {
title: "{place}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "TYPE",
label: "类型",
format: {
places: 0,
digitSeparator: true
}
}, },
{ {
fieldName: "ADDRESS", level: 2,
label: "地址 ", levelValue: 2,
format: { resolution: 0.3515625,
places: 0, scale: 147748796.52937502,
digitSeparator: true
}
}, },
] {
}] level: 3,
}; levelValue: 3,
resolution: 0.17578125,
//热力图原理，热力图反映热力点对周围的影响程度，在地图上以像素为单位进行展示 scale: 73874398.264687508,
//每个像素点上面的影响（权值）=每个热力点赋给它的影响的总和
//每个热力点的影响 = 热力点自身权重（field属性字段确定的，属性值越大，值越大）*距离反比系数（离热力点越远，其上的影响越小，系数越小）
const heatmaplayer = new FeatureLayer({
url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_JTQJ/MapServer/11",
outFields: ["*"],
popupTemplate: template,
});
// 创建地图
map = new Map({
basemap: tdtBasemap,
layers: [heatmaplayer]
});
view = new MapView({
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 7,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [106.6587, 26.3644],
map: map
});
heatmaplayer.queryFeatures().then(function (results) {
var maxcount = 0;
for (var index in results.features) {
if (
maxcount < results.features[index].attributes.total_coun
) {
maxcount = results.features[index].attributes.total_coun;
}
}
console.log(maxcount);
var renderer = {
type: "heatmap",
field: "total_coun", //热力点的权值字段，如果为空则每个热力点自身权重一样
blurRadius: 10, //热力点的影响范围单位px，超过此范围的按权值按0计算
//颜色区间，变化范围，ratio = 热力点的权值/maxPixelIntensity
colorStops: [{
ratio: 0,
color: "rgba(0, 0, 255, 0)" //透明度为0，否则地图将会被热力图遮盖
}, },
{ {
ratio: 0.1, level: 4,
color: "royalblue" levelValue: 4,
resolution: 0.087890625,
scale: 36937199.132343754,
}, },
{ {
ratio: 0.3, level: 5,
color: "cyan" levelValue: 5,
resolution: 0.0439453125,
scale: 18468599.566171877,
}, },
{ {
ratio: 0.5, level: 6,
color: "lime" levelValue: 6,
resolution: 0.02197265625,
scale: 9234299.7830859385,
}, },
{ {
ratio: 0.7, level: 7,
color: "yellow" levelValue: 7,
resolution: 0.010986328125,
scale: 4617149.8915429693,
}, },
{ {
ratio: 1, level: 8,
color: "red" 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-5,
scale: 36071.483527679447,
},
{
level: 15,
levelValue: 15,
resolution: 4.291534423828125e-5,
scale: 18035.741763839724,
},
{
level: 16,
levelValue: 16,
resolution: 2.1457672119140625e-5,
scale: 9017.8708819198619,
},
{
level: 17,
levelValue: 17,
resolution: 1.0728836059570313e-5,
scale: 4508.9354409599309,
},
{
level: 18,
levelValue: 18,
resolution: 5.3644180297851563e-6,
scale: 2254.4677204799655,
},
{
level: 19,
levelValue: 19,
resolution: 2.68220901489257815e-6,
scale: 1127.23386023998275,
},
{
level: 20,
levelValue: 2,
resolution: 1.341104507446289075e-6,
scale: 563.616930119991375,
},
], ],
//像素点的最高权值，当其权值超过100时，按100计算 });
maxPixelIntensity: maxcount, // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
minPixelIntensity: 0 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",
heatmaplayer.renderer = renderer; {
}); subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
view.ui.add( tileInfo: tileInfo,
new Legend({ spatialReference: {
view: view wkid: 4326,
}), },
"bottom-left" }
); );
var list = new LayerList({ var annomap = new WebTileLayer(
view: view, "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",
}); {
view.ui.add( subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
new LayerList({ tileInfo: tileInfo,
view: view spatialReference: {
}), "top-right"); wkid: 4326,
console.log(list); },
}
);
// 请求天地图服务跨域的设置
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",
});
}); var template = {
title: "{hazard_name}",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "update_date",
label: "日期"
},
{
fieldName: "rvalue",
label: "指数",
format: {
places: 0,
digitSeparator: true,
},
},
],
},
],
};
</script> //热力图原理，热力图反映热力点对周围的影响程度，在地图上以像素为单位进行展示
</head> //每个像素点上面的影响（权值）=每个热力点赋给它的影响的总和
//每个热力点的影响 = 热力点自身权重（field属性字段确定的，属性值越大，值越大）*距离反比系数（离热力点越远，其上的影响越小，系数越小）
var heatmaplayer = new FeatureLayer({
url:
"https://apaasgis.wodcloud.com/server/rest/services/SX_FXJC_ZDWXY/FeatureServer/0",
outFields: ["*"],
popupTemplate: template,
});
// 创建地图
var map = new Map({
basemap: tdtBasemap,
layers: [heatmaplayer],
});
<body> var view = new MapView({
<div id="viewDiv"></div> container: "viewDiv",
</body> zoom: 7,
constraints: {
lods: tileInfo.lods,
snapToZoom: true,
},
center: [112.729463, 38.061348],
map: map,
});
heatmaplayer.queryFeatures().then(function(results) {
var maxcount = 0;
for (var index in results.features) {
if (maxcount < results.features[index].attributes.rvalue) {
maxcount = results.features[index].attributes.rvalue;
}
}
var renderer = {
type: "heatmap",
field: "rvalue", //热力点的权值字段，如果为空则每个热力点自身权重一样
blurRadius: 10, //热力点的影响范围单位px，超过此范围的按权值按0计算
//颜色区间，变化范围，ratio = 热力点的权值/maxPixelIntensity
colorStops: [
{
ratio: 0,
color: "rgba(0, 0, 255, 0)", //透明度为0，否则地图将会被热力图遮盖
},
{
ratio: 0.1,
color: "royalblue",
},
{
ratio: 0.3,
color: "cyan",
},
{
ratio: 0.5,
color: "lime",
},
{
ratio: 0.7,
color: "yellow",
},
{
ratio: 1,
color: "red",
},
],
//像素点的最高权值，当其权值超过100时，按100计算
maxPixelIntensity: maxcount,
minPixelIntensity: 0,
};
heatmaplayer.renderer = renderer;
});
view.ui.add(
new Legend({
view: view,
}),
"bottom-left"
);
var list = new LayerList({
view: view,
});
view.ui.add(
new LayerList({
view: view,
}),
"top-right"
);
console.log(list);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html> </html>
static/view/demo/page-migrate.html
View file @ a09d2c4c
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>模拟人口迁徙</title> <title>模拟人口迁徙</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
<style> <style>
html, html,
body { body {
...@@ -26,11 +26,7 @@ ...@@ -26,11 +26,7 @@
height: 100%; height: 100%;
} }
</style> </style>
<script src="https://apaas3.wodcloud.com/mapstatic/js/echarts.min.js"></script>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/echarts.min.js"></script>
<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 src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script> <script>
var __DEV__ = false; var __DEV__ = false;
...@@ -228,32 +224,193 @@ ...@@ -228,32 +224,193 @@
}; };
require([ require([
"esri/config",
"esri/Map", "esri/Map",
"esri/Basemap", "esri/Basemap",
"https://apaas.wodcloud.com/mapsamples/static/js/4EchartsLayer.js", "https://apaas3.wodcloud.com/mapstatic/js/4EchartsLayer.js",
"esri/views/MapView", "esri/views/MapView",
"esri/layers/WebTileLayer", "esri/layers/WebTileLayer",
"esri/layers/support/TileInfo", "esri/layers/support/TileInfo",
"dojo/domReady!" "dojo/domReady!"
], function ( ], function (
Map, Basemap, echartsLayer, MapView, WebTileLayer, TileInfo ESRICONFIG, Map, Basemap, echartsLayer, MapView, WebTileLayer, TileInfo
) { ) {
// 通过瓦片形式加载天地图的 // 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度 // 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定 // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
let tiledlayer = new WebTileLayer({ var tileInfo = new TileInfo({
urlTemplate: dpi: 90.71428571427429, //解析度，即像素
"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}", rows: 256,
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"] cols: 256,
}); compressionQuality: 0, //压缩像素值
let annolayer = new WebTileLayer({ origin: {
urlTemplate: x: -180,
"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}", y: 90,
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"] },
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-5,
scale: 36071.483527679447,
},
{
level: 15,
levelValue: 15,
resolution: 4.291534423828125e-5,
scale: 18035.741763839724,
},
{
level: 16,
levelValue: 16,
resolution: 2.1457672119140625e-5,
scale: 9017.8708819198619,
},
{
level: 17,
levelValue: 17,
resolution: 1.0728836059570313e-5,
scale: 4508.9354409599309,
},
{
level: 18,
levelValue: 18,
resolution: 5.3644180297851563e-6,
scale: 2254.4677204799655,
},
{
level: 19,
levelValue: 19,
resolution: 2.68220901489257815e-6,
scale: 1127.23386023998275,
},
{
level: 20,
levelValue: 2,
resolution: 1.341104507446289075e-6,
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,
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,
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, annolayer], baseLayers: [tiledLayer, annomap],
title: "TDT Basemap", title: "TDT Basemap",
id: "tdtBasemap", id: "tdtBasemap",
}); });
...@@ -577,7 +734,6 @@ ...@@ -577,7 +734,6 @@
}, },
series: series series: series
}; };
console.log(series);
option.series.push({ option.series.push({
name: ' Top10', name: ' Top10',
type: 'effectScatter', type: 'effectScatter',
...@@ -588,13 +744,6 @@ ...@@ -588,13 +744,6 @@
brushType: 'fill', brushType: 'fill',
scale: 4 scale: 4
}, },
// label: {
// normal: {
// show: true,
// position: 'right',
// formatter: '{b}'
// }
// },
symbolSize: 10, symbolSize: 10,
itemStyle: { itemStyle: {
normal: { normal: {
...@@ -604,16 +753,6 @@ ...@@ -604,16 +753,6 @@
data: [] data: []
}) })
var chart = new echartsLayer(view, echarts, option); var chart = new echartsLayer(view, echarts, option);
// view.on('click', event => {
// let pt = view.toMap(event)
// // console.log(pt);
// // option.series[]
// option.series[option.series.length - 1].data = [{ value: [pt.longitude, pt.latitude] }]
// console.log(option.series);
// chart.setChartOption(option)
// console.log(chart);
// })
view.on('pointer-move', event => { view.on('pointer-move', event => {
let pt = view.toMap(event) let pt = view.toMap(event)
option.series[option.series.length - 1].data = [{ value: [pt.longitude, pt.latitude] }] option.series[option.series.length - 1].data = [{ value: [pt.longitude, pt.latitude] }]
......
static/view/demo/page-migrate2.html
View file @ a09d2c4c
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>模拟人口迁徙</title> <title>模拟人口迁徙</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
<style> <style>
html, html,
body { body {
...@@ -24,13 +24,8 @@ ...@@ -24,13 +24,8 @@
width: 50%; width: 50%;
height: 100%; height: 100%;
} }
</style> </style>
<script src="https://apaas3.wodcloud.com/mapstatic/js/echarts.min.js"></script>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/echarts.min.js"></script>
<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 src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script> <script>
var __DEV__ = false; var __DEV__ = false;
...@@ -228,31 +223,193 @@ ...@@ -228,31 +223,193 @@
}; };
var map,view,scatterData,lineData; var map,view,scatterData,lineData;
require([ require([
"esri/config",
"esri/Map", "esri/Map",
"esri/Basemap", "esri/Basemap",
"https://apaas.wodcloud.com/mapsamples/static/js/4EchartsLayer.js", "https://apaas3.wodcloud.com/mapstatic/js/4EchartsLayer.js",
"esri/views/MapView", "esri/views/MapView",
"esri/layers/WebTileLayer", "esri/layers/WebTileLayer",
"esri/layers/support/TileInfo", "esri/layers/support/TileInfo",
"dojo/domReady!" "dojo/domReady!"
], function ( ], function (
Map, Basemap, echartsLayer, MapView, WebTileLayer, TileInfo ESRICONFIG, Map, Basemap, echartsLayer, MapView, WebTileLayer, TileInfo
) { ) {
// 通过瓦片形式加载天地图的 // 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度 // 天地图根据投影分为两种：墨卡托和经纬度
let tiledlayer = new WebTileLayer({ // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
urlTemplate: var tileInfo = new TileInfo({
"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}", dpi: 90.71428571427429, //解析度，即像素
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"] rows: 256,
}); cols: 256,
let annolayer = new WebTileLayer({ compressionQuality: 0, //压缩像素值
urlTemplate: origin: {
"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}", x: -180,
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"] 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-5,
scale: 36071.483527679447,
},
{
level: 15,
levelValue: 15,
resolution: 4.291534423828125e-5,
scale: 18035.741763839724,
},
{
level: 16,
levelValue: 16,
resolution: 2.1457672119140625e-5,
scale: 9017.8708819198619,
},
{
level: 17,
levelValue: 17,
resolution: 1.0728836059570313e-5,
scale: 4508.9354409599309,
},
{
level: 18,
levelValue: 18,
resolution: 5.3644180297851563e-6,
scale: 2254.4677204799655,
},
{
level: 19,
levelValue: 19,
resolution: 2.68220901489257815e-6,
scale: 1127.23386023998275,
},
{
level: 20,
levelValue: 2,
resolution: 1.341104507446289075e-6,
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,
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,
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, annolayer], baseLayers: [tiledLayer, annomap],
title: "TDT Basemap", title: "TDT Basemap",
id: "tdtBasemap", id: "tdtBasemap",
}); });
......
static/view/demo/page-movinglayer.html
View file @ a09d2c4c
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
</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 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> <script>
let map, let map,
...@@ -36,6 +36,7 @@ ...@@ -36,6 +36,7 @@
polylineSymbol, polylineSymbol,
graphics; graphics;
require([ require([
"esri/config",
"esri/Map", "esri/Map",
"esri/Basemap", "esri/Basemap",
"esri/TimeExtent", "esri/TimeExtent",
...@@ -55,7 +56,9 @@ ...@@ -55,7 +56,9 @@
"esri/symbols/PictureMarkerSymbol", "esri/symbols/PictureMarkerSymbol",
"esri/core/watchUtils", "esri/core/watchUtils",
"dojo/domReady!" "dojo/domReady!"
], function (Map, ], function (
ESRICONFIG,
Map,
Basemap, Basemap,
TimeExtent, TimeExtent,
TimeInfo, TimeInfo,
...@@ -83,10 +86,10 @@ ...@@ -83,10 +86,10 @@
compressionQuality: 0, //压缩像素值 compressionQuality: 0, //压缩像素值
origin: { origin: {
x: -180, x: -180,
y: 90 y: 90,
}, },
spatialReference: { spatialReference: {
wkid: 4326 wkid: 4326,
}, },
lods: [ lods: [
//定义平铺方案的细节级别数组 //定义平铺方案的细节级别数组
...@@ -94,150 +97,163 @@ ...@@ -94,150 +97,163 @@
level: 1, level: 1,
levelValue: 1, levelValue: 1,
resolution: 0.703125, resolution: 0.703125,
scale: 295497593.05875003 scale: 295497593.05875003,
}, },
{ {
level: 2, level: 2,
levelValue: 2, levelValue: 2,
resolution: 0.3515625, resolution: 0.3515625,
scale: 147748796.52937502 scale: 147748796.52937502,
}, },
{ {
level: 3, level: 3,
levelValue: 3, levelValue: 3,
resolution: 0.17578125, resolution: 0.17578125,
scale: 73874398.264687508 scale: 73874398.264687508,
}, },
{ {
level: 4, level: 4,
levelValue: 4, levelValue: 4,
resolution: 0.087890625, resolution: 0.087890625,
scale: 36937199.132343754 scale: 36937199.132343754,
}, },
{ {
level: 5, level: 5,
levelValue: 5, levelValue: 5,
resolution: 0.0439453125, resolution: 0.0439453125,
scale: 18468599.566171877 scale: 18468599.566171877,
}, },
{ {
level: 6, level: 6,
levelValue: 6, levelValue: 6,
resolution: 0.02197265625, resolution: 0.02197265625,
scale: 9234299.7830859385 scale: 9234299.7830859385,
}, },
{ {
level: 7, level: 7,
levelValue: 7, levelValue: 7,
resolution: 0.010986328125, resolution: 0.010986328125,
scale: 4617149.8915429693 scale: 4617149.8915429693,
}, },
{ {
level: 8, level: 8,
levelValue: 8, levelValue: 8,
resolution: 0.0054931640625, resolution: 0.0054931640625,
scale: 2308574.9457714846 scale: 2308574.9457714846,
}, },
{ {
level: 9, level: 9,
levelValue: 9, levelValue: 9,
resolution: 0.00274658203125, resolution: 0.00274658203125,
scale: 1154287.4728857423 scale: 1154287.4728857423,
}, },
{ {
level: 10, level: 10,
levelValue: 10, levelValue: 10,
resolution: 0.001373291015625, resolution: 0.001373291015625,
scale: 577143.73644287116 scale: 577143.73644287116,
}, },
{ {
level: 11, level: 11,
levelValue: 11, levelValue: 11,
resolution: 0.0006866455078125, resolution: 0.0006866455078125,
scale: 288571.86822143558 scale: 288571.86822143558,
}, },
{ {
level: 12, level: 12,
levelValue: 12, levelValue: 12,
resolution: 0.00034332275390625, resolution: 0.00034332275390625,
scale: 144285.93411071779 scale: 144285.93411071779,
}, },
{ {
level: 13, level: 13,
levelValue: 13, levelValue: 13,
resolution: 0.000171661376953125, resolution: 0.000171661376953125,
scale: 72142.967055358895 scale: 72142.967055358895,
}, },
{ {
level: 14, level: 14,
levelValue: 14, levelValue: 14,
resolution: 8.58306884765625e-5, resolution: 8.58306884765625e-5,
scale: 36071.483527679447 scale: 36071.483527679447,
}, },
{ {
level: 15, level: 15,
levelValue: 15, levelValue: 15,
resolution: 4.291534423828125e-5, resolution: 4.291534423828125e-5,
scale: 18035.741763839724 scale: 18035.741763839724,
}, },
{ {
level: 16, level: 16,
levelValue: 16, levelValue: 16,
resolution: 2.1457672119140625e-5, resolution: 2.1457672119140625e-5,
scale: 9017.8708819198619 scale: 9017.8708819198619,
}, },
{ {
level: 17, level: 17,
levelValue: 17, levelValue: 17,
resolution: 1.0728836059570313e-5, resolution: 1.0728836059570313e-5,
scale: 4508.9354409599309 scale: 4508.9354409599309,
}, },
{ {
level: 18, level: 18,
levelValue: 18, levelValue: 18,
resolution: 5.3644180297851563e-6, resolution: 5.3644180297851563e-6,
scale: 2254.4677204799655 scale: 2254.4677204799655,
}, },
{ {
level: 19, level: 19,
levelValue: 19, levelValue: 19,
resolution: 2.68220901489257815e-6, resolution: 2.68220901489257815e-6,
scale: 1127.23386023998275 scale: 1127.23386023998275,
}, },
{ {
level: 20, level: 20,
levelValue: 2, levelValue: 2,
resolution: 1.341104507446289075e-6, resolution: 1.341104507446289075e-6,
scale: 563.616930119991375 scale: 563.616930119991375,
} },
] ],
}); });
// 在加载经纬度地图的时候我们需要使用 {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: { spatialReference: {
wkid: 4326 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: { spatialReference: {
wkid: 4326 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
}
}); });
map = new Map({ map = new Map({
basemap: tdtBasemap basemap: tdtBasemap
...@@ -294,14 +310,6 @@ ...@@ -294,14 +310,6 @@
}); });
symbol = new PictureMarkerSymbol("https://apaas.wodcloud.com/minemapapi/image/jtqj3/ic_wxhuoche.png", symbol = new PictureMarkerSymbol("https://apaas.wodcloud.com/minemapapi/image/jtqj3/ic_wxhuoche.png",
15, 15); 15, 15);
// var symbol = {
// type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
// color: [0, 0, 139],
// outline: {
// color: [255, 255, 255],
// width: 1.5
// }
// };
var attr = properties; var attr = properties;
var popupTemplate = { var popupTemplate = {
title: "两客一危车辆", title: "两客一危车辆",
......
static/view/demo/page-video_web_map.html
View file @ a09d2c4c
...@@ -50,7 +50,6 @@ ...@@ -50,7 +50,6 @@
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;
......
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