Skip to content

A
apaas-ui
Commit cb7659f4 authored by 张俊's avatar 张俊
Browse files
Options

Merge branch 'dev' of https://cloud.wodcloud.com/git/apaas/apaas-v3-ui into dev

parents 8879184d 5f864496
Hide whitespace changes
Inline Side-by-side
Showing with 171433 additions and 862 deletions
src/assets/css/index.css
View file @ cb7659f4
......@@ -268,7 +268,7 @@ div {
}
.el-tabs__nav-scroll .el-tabs__item {
line-height: 30px !important;
line-height: 38px !important;
height: 44px !important;
}
......
src/components/doc-width-nav.vue 0 → 100644
View file @ cb7659f4
<template>
<div class="doc_width_nav">
<div class="part doc_part">
<h3 class="part_title">
<span>{{ title || "-" }}</span>
<span>更新时间：{{ time || "-" }}</span>
</h3>
<div
class="part_content doc_content apaas_scroll"
v-html="content"
ref="docContent"
></div>
</div>
<div class="part nav_part">
<h3 class="part_title">
<span>导航</span>
</h3>
<ul class="part_content nav_content apaas_scroll">
<li
v-for="(item, index) in navTree"
:class="[
'text_clip',
'level_' + item.level,
item.id === curNav ? ' current' : '',
]"
:key="index"
>
<a v-text="item.title" @click="clickNav(item)"></a>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
props: {
richText: {
type: String,
defalut: "",
},
title: {
type: String,
defalut: "",
},
time: {
type: String,
defalut: "",
},
},
data() {
return {
content: "",
navTree: [],
curNav: "",
};
},
watch: {
richText() {
this.translate();
},
},
mounted() {
this.translate();
},
methods: {
translate() {
let content = this.richText;
let titles =
content.match(
/<h1(([\s\S])*?)<\/h1>|<h2(([\s\S])*?)<\/h2>|<h3(([\s\S])*?)<\/h3>/g
) || [];
let time = new Date().getTime();
let pre_h1_index = 0;
let pre_h2_index = 0;
let pre_h3_index = 0;
let newTitles = titles
.map((title, index) => {
let newTitle = title;
let level = 0;
let id = "";
if (title.match(/<h1(([\s\S])*?)<\/h1>/g)) {
pre_h1_index++;
pre_h2_index = 0;
pre_h3_index = 0;
level = 1;
id = `nav_${pre_h1_index}` + "_" + time;
newTitle = title.replace(/<h1/g, `<h1 id="${id}"`);
} else if (title.match(/<h2(([\s\S])*?)<\/h2>/g)) {
pre_h2_index++;
pre_h3_index = 0;
level = 2;
id = `nav_${pre_h1_index}_${pre_h2_index}` + "_" + time;
newTitle = title.replace(/<h2/g, `<h2 id="${id}"`);
} else if (title.match(/<h3(([\s\S])*?)<\/h3>/g)) {
pre_h3_index++;
level = 3;
id = `nav_${pre_h1_index}_${pre_h2_index}_${pre_h3_index}`;
newTitle = title.replace(/<h3/g, `<h3 id="${id}"`) + "_" + time;
}
content = content.replace(new RegExp(title), newTitle);
return {
level,
id,
title: title.replace(/<\/?.+?>/g, ""),
};
})
.filter((item) => item.title);
this.content = content;
this.navTree = newTitles;
this.curNav = (newTitles[0] && newTitles[0].id) || "";
},
clickNav(item) {
let target = document.querySelector(`#${item.id}`);
this.setScroll(target, this.$refs.docContent);
this.curNav = item.id;
},
setScroll(el, parentEl) {
let actualTop = el.offsetTop;
let current = el.offsetParent;
while (current !== null) {
actualTop += current.offsetTop;
current = current.offsetParent;
}
parentEl.scrollTop = actualTop - parentEl.offsetTop;
},
},
};
</script>
<style scoped>
.doc_width_nav {
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.doc_width_nav > .part {
background-color: #fff;
border-radius: 10px;
padding-bottom: 20px;
box-sizing: border-box;
box-sizing: 0;
}
.doc_width_nav > .part + .part {
margin-left: 20px;
}
.doc_part {
flex-grow: 1;
}
.nav_part {
width: 270px;
flex-shrink: 0;
}
.part_title {
padding: 10px 20px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.part_title::after {
content: "";
position: absolute;
right: 0;
left: 0;
bottom: 0;
border-bottom: 1px solid #e3e5ef;
}
.part_title > span:nth-child(1) {
font-size: 18px;
font-weight: bold;
line-height: 36px;
color: #58617a;
position: relative;
padding-left: 15px;
}
.part_title > span:nth-child(1)::before {
content: "";
width: 4px;
height: 18px;
background-color: #515fe7;
border-radius: 2px;
position: absolute;
top: 10px;
left: 0;
}
.part_title > span:nth-child(2) {
font-size: 14px;
line-height: 24px;
color: #8890a7;
padding-left: 20px;
background-image: url("/../assets/imgs/shop_ic_updatetime.png");
background-repeat: no-repeat;
background-position: left center;
}
.part_content {
height: calc(100% - 76px);
margin-top: 20px;
box-sizing: border-box;
overflow: auto;
}
.doc_content {
padding: 0 20px;
}
.nav_content {
padding-left: 20px;
}
.nav_content > li > a {
display: block;
height: 30px;
padding: 0 20px;
font-size: 14px;
line-height: 30px;
color: #58617a;
text-decoration: none;
cursor: pointer;
}
.nav_content > li.level_1 > a {
color: #242c43;
}
.nav_content > li.level_2 > a {
text-indent: 2em;
}
.nav_content > li.level_3 > a {
text-indent: 4em;
}
.nav_content > li.current > a {
background-color: #e6ebfe;
color: #515fe7;
}
</style>
src/components/general/upload_file.vue
View file @ cb7659f4
......@@ -114,6 +114,19 @@ export default {
},
watch: {
list(value) {
this.getFileArray(value);
},
},
created() {
if (!this.unique) {
this.anotherData.uniqueCode = this.unique;
}
},
mounted() {
this.getFileArray(this.list);
},
methods: {
getFileArray(value) {
var getListImg = [];
if (value && value.length != 0) {
for (var i = 0; i < value.length; i++) {
......@@ -126,13 +139,6 @@ export default {
this.fileArray = [...getListImg];
this.hideUpload = this.fileArray.length >= this.max;
},
},
created() {
if (!this.unique) {
this.anotherData.uniqueCode = this.unique;
}
},
methods: {
beforeAvatarUpload(file) {
if (this.type == "mp3") {
const isMP3 = file.type === "audio/mp3";
......
src/components/new-com/inlineForm.vue
View file @ cb7659f4
......@@ -107,20 +107,20 @@ export default {
.from_content1 .el-input__inner {
background-color: #f7f8f9;
}
.el-date-editor.el-range-editor .el-range-input {
.from_content1 .el-date-editor.el-range-editor .el-range-input {
background-color: #f7f8f9;
width: 80px;
}
.el-date-editor.el-range-editor .el-range-separator {
.from_content1 .el-date-editor.el-range-editor .el-range-separator {
width: 40px;
position: relative;
top: 2px;
}
.el-date-editor.el-range-editor {
.from_content1 .el-date-editor.el-range-editor {
width: 260px;
padding: 3px 10px 3px 15px;
}
.el-date-editor .el-range__icon {
.from_content1 .el-date-editor .el-range__icon {
margin-right: 8px;
}
</style>
\ No newline at end of file
src/components/shopping-cart/shopping-cart-cell.vue
View file @ cb7659f4
......@@ -125,7 +125,7 @@
</div>
</div>
</el-col>
<el-col :span="4" class="shopping_cell_num">
<el-col :span="3" class="shopping_cell_num">
<div v-if="cellIsService">
<el-input-number
:disabled="readOnly"
......@@ -136,7 +136,18 @@
></el-input-number>
</div>
</el-col>
<el-col :span="4" class="shopping_cell_options">
<el-col :span="2" class="shopping_cell_num">
<div v-if="cellIsService">
<el-input-number
:disabled="readOnly"
v-model="cellItems.duration"
@change="changeNum"
size="mini"
:min="1"
></el-input-number>
</div>
</el-col>
<el-col :span="3" class="shopping_cell_options">
<el-checkbox
v-if="!readOnly"
v-model="cellItems.is_subscribe"
......
src/components/shopping-cart/shopping-cart-com.vue
View file @ cb7659f4
......@@ -8,8 +8,9 @@
</el-col>
<el-col :span="9" class="shopping_all_head_item">服务信息</el-col>
<el-col :span="5" class="shopping_all_head_item">规格</el-col>
<el-col :span="4" class="shopping_all_head_item">购买时长</el-col>
<el-col :span="4" class="shopping_all_head_item">操作</el-col>
<el-col :span="3" class="shopping_all_head_item">购买时长</el-col>
<el-col :span="2" class="shopping_all_head_item">小计</el-col>
<el-col :span="3" class="shopping_all_head_item">操作</el-col>
</el-row>
</div>
<ShoppingCartList
......
src/main.js
View file @ cb7659f4
......@@ -8,6 +8,11 @@ import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
Vue.use(codemirror)
import VueResource from "vue-resource";
Vue.use(VueResource);
......
src/pages/technical-support/answer-center/detail.vue
View file @ cb7659f4
<template>
<div class="detail_box">
<p class="now_page_title">
技术支持 / 问答中心 / 问答列表 /
<span>详情</span>
</p>
<div class="apass_breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item to="/technical_support">
技术支持
</el-breadcrumb-item>
<el-breadcrumb-item to="/technical_support/answer_center">
问答中心
</el-breadcrumb-item>
<el-breadcrumb-item to="/technical_support/answer_center/list">
问答列表
</el-breadcrumb-item>
<el-breadcrumb-item> 详情 </el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="detail_content">
<div class="question" v-if="question.title">
<p>{{ question.title }}</p>
......@@ -49,34 +59,36 @@
<div slot="suffix" class="back_solt" @click="answer_question(item.id,item.user_id)">回复</div>
</el-input>
</div>
<div class="back_fllow answer_box" v-for="(it,idx) in item.children" :key="'ans_child'+idx+5000" v-if="idx<=4||answer_child_index===index">
<div :style="idx == item.children.length-1&&item.children.length<=5?{border:'0',overflow:'hidden',}:{borderBottom:'2px solid #f4f7fc',overflow:'hidden',}" >
<div class="picture">
<img :src="it.user_picture_path" alt="" style="width:100%">
</div>
<div class="text" style="border:0;">
<p>
<span class="left">{{it.username}} <span><span style="color:#bcc1d0;margin:0 9px;">回复</span>{{it.answered_user}}</span> </span>
<span class="right">
<span></span><span>{{deal_time(it.created)}}</span>
</span>
</p>
<div v-html="it.content" class="hf_content"></div>
<div @click="showinput(index,idx)" class="back"><img src="../../../assets/imgs/jszc_btn_huifu.png" alt=""> 回复</div>
</div>
<div class="back_input" style="padding:0;height:auto;margin-bottom:0;" v-if="answer_count[0]==index&&answer_count[1]==idx">
<el-input
:placeholder="'回复'+it.username"
@blur="clear_index"
:ref="'input'+index+idx"
v-model="back_info">
<div slot="prefix" style="height:48px;line-height:48px;">
<img :src="user_info.picture_path" alt="" style="width:24px;margin:0 10px 0 10px;vertical-align:-6px;border-radius:50%;"></div>
<div slot="suffix" class="back_solt" @click="answer_question(it.id,it.user_id)">回复</div>
</el-input>
<template v-for="(it,idx) in item.children">
<div class="back_fllow answer_box" :key="'ans_child'+idx+5000" v-if="idx<=4||answer_child_index===index">
<div :style="idx == item.children.length-1&&item.children.length<=5?{border:'0',overflow:'hidden',}:{borderBottom:'2px solid #f4f7fc',overflow:'hidden',}" >
<div class="picture">
<img :src="it.user_picture_path" alt="" style="width:100%">
</div>
<div class="text" style="border:0;">
<p>
<span class="left">{{it.username}} <span><span style="color:#bcc1d0;margin:0 9px;">回复</span>{{it.answered_user}}</span> </span>
<span class="right">
<span></span><span>{{deal_time(it.created)}}</span>
</span>
</p>
<div v-html="it.content" class="hf_content"></div>
<div @click="showinput(index,idx)" class="back"><img src="../../../assets/imgs/jszc_btn_huifu.png" alt=""> 回复</div>
</div>
<div class="back_input" style="padding:0;height:auto;margin-bottom:0;" v-if="answer_count[0]==index&&answer_count[1]==idx">
<el-input
:placeholder="'回复'+it.username"
@blur="clear_index"
:ref="'input'+index+idx"
v-model="back_info">
<div slot="prefix" style="height:48px;line-height:48px;">
<img :src="user_info.picture_path" alt="" style="width:24px;margin:0 10px 0 10px;vertical-align:-6px;border-radius:50%;"></div>
<div slot="suffix" class="back_solt" @click="answer_question(it.id,it.user_id)">回复</div>
</el-input>
</div>
</div>
</div>
</div>
</template>
<div class="under_count" v-if="item.children&&item.children.length>5&&answer_child_index!==index">
还有{{item.children.length-5}}条回复，<span @click="answer_child_index=index">点击查看</span>
</div>
......@@ -124,130 +136,7 @@ export default {
'video'
],
editstr:'',
answer: [
{
id: 4,
username: "普通neo",
created: "2020-10-21T15:30:13+08:00",
content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
answered_user: "",
children: [
{
id: 5,
username: "普通neo",
created: "2020-10-21T15:34:20+08:00",
content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
answered_user: "我是超级管理员",
children: null,
},
{
id: 6,
username: "普通neo",
created: "2020-10-21T15:34:20+08:00",
content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
answered_user: "我是超级管理员",
children: null,
},
{
id: 7,
username: "普通neo",
created: "2020-10-21T15:34:20+08:00",
content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
answered_user: "我是超级管理员",
children: null,
},
{
id: 5,
username: "普通neo",
created: "2020-10-21T15:34:20+08:00",
content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
answered_user: "我是超级管理员",
children: null,
},
{
id: 6,
username: "普通neo",
created: "2020-10-21T15:34:20+08:00",
content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
answered_user: "我是超级管理员",
children: null,
},
{
id: 7,
username: "普通neo",
created: "2020-10-21T15:34:20+08:00",
content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
answered_user: "我是超级管理员",
children: null,
},
],
},
{
id: 4,
username: "普通neo",
created: "2020-10-21T15:30:13+08:00",
content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
answered_user: "",
children: [
{
id: 5,
username: "普通neo",
created: "2020-10-21T15:34:20+08:00",
content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
answered_user: "我是超级管理员",
children: null,
},
{
id: 6,
username: "普通neo",
created: "2020-10-21T15:34:20+08:00",
content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
answered_user: "我是超级管理员",
children: null,
},
{
id: 7,
username: "普通neo",
created: "2020-10-21T15:34:20+08:00",
content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
answered_user: "我是超级管理员",
children: null,
},
{
id: 5,
username: "普通neo",
created: "2020-10-21T15:34:20+08:00",
content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
answered_user: "我是超级管理员",
children: null,
},
{
id: 6,
username: "普通neo",
created: "2020-10-21T15:34:20+08:00",
content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
answered_user: "我是超级管理员",
children: null,
},
{
id: 7,
username: "普通neo",
created: "2020-10-21T15:34:20+08:00",
content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
answered_user: "我是超级管理员",
children: null,
},
],
},
{
id: 4,
username: "普通neo",
created: "2020-10-21T15:30:13+08:00",
content: "这个问题我知道，详情请参见http://www.baidu.com/abc",
answered_user: "",
children: null,
},
],
answer: [],
};
},
watch: {},
......@@ -348,50 +237,43 @@ export default {
})
},100)
},
deal_time(time){
console.log(time);
return time.split('+')[0].replace("T"," ")
},
showinput(...arg){
console.log(arg);
deal_time(time){
console.log(time);
return time.split('+')[0].replace("T"," ")
},
showinput(...arg){
console.log(arg);
this.answer_count=[]
this.answer_index=''
this.back_info = ''
if(!arg[1]&&arg[1]!==0){
this.answer_index = arg[0]
this.$nextTick(()=>{
var temp = 'input'+arg[0]
this.$refs[temp][0].$refs.input.focus()
})
}else{
this.answer_count=arg
this.$nextTick(()=>{
this.$refs['input'+arg[0]+arg[1]][0].$refs.input.focus();
})
}
},
clear_index(){
setTimeout(()=>{
this.answer_count=[]
this.answer_index=''
this.back_info = ''
if(!arg[1]&&arg[1]!==0){
this.answer_index = arg[0]
this.$nextTick(()=>{
var temp = 'input'+arg[0]
this.$refs[temp][0].$refs.input.focus()
})
}else{
this.answer_count=arg
this.$nextTick(()=>{
this.$refs['input'+arg[0]+arg[1]][0].$refs.input.focus();
})
}
},
clear_index(){
setTimeout(()=>{
this.answer_count=[]
this.answer_index=''
this.back_info = ''
},500)
}
},500)
}
},
};
</script>
<style scoped>
.detail_box {
/* min-height: calc(100% - 15px); */
}
.now_page_title {
margin: 13px 0;
color: #898d9e;
}
.now_page_title span {
color: #242c43;
.apass_breadcrumb > .el-breadcrumb {
padding: 12px 0 11px;
}
.detail_content {
width: 100%;
......@@ -399,7 +281,7 @@ export default {
}
.question,
.answer {
width: 856px;
width: 100%;
background-color: #fff;
box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.04);
border-radius: 12px;
......
src/pages/technical-support/answer-center/edit.vue
View file @ cb7659f4
<template>
<div class="detail_box">
<p class="now_page_title">
技术支持 / 问答中心 /
<span>发帖提问</span>
</p>
<div class="apass_breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item to="/technical_support">
技术支持
</el-breadcrumb-item>
<el-breadcrumb-item to="/technical_support/answer_center">
问答中心
</el-breadcrumb-item>
<el-breadcrumb-item> 发帖提问 </el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="detail_content">
<div class="detail_title">
<el-input v-model="title" placeholder="请输入问题标题"></el-input>
......@@ -93,15 +100,8 @@ export default {
</script>
<style scoped>
.detail_box {
}
.now_page_title {
margin: 13px 0;
color: #898d9e;
}
.now_page_title span {
color: #242c43;
.apass_breadcrumb > .el-breadcrumb {
padding: 12px 0 11px;
}
.detail_content {
width: 1200px;
......
src/pages/technical-support/answer-center/index.vue
View file @ cb7659f4
<template>
<div class="answer_container">
<router-view class="left_content" />
<div class="right_content" v-if="$route.path!== '/technical_support/answer_center/edit'">
<div class="user_info">
<div
class="right_content"
v-if="$route.path !== '/technical_support/answer_center/edit'"
>
<div class="user_info" v-if="userInfo">
<div class="user_img">
<img :src="require('../../../assets/imgs/img_head.png')" />
<img :src="userInfo.picture_path || head_pic" />
</div>
<p class="user_name">勒布朗</p>
<p class="user_level">普通用户</p>
<p class="user_name">{{ userInfo.user_name }}</p>
<p class="user_level">{{ userInfo.role }}</p>
<ul class="user_other">
<li style="cursor: pointer;" @click="intoListPage(0)">
<p>800</p>
<p>{{ userInfo.question_num }}</p>
<p>我的提问</p>
</li>
<li style="cursor: pointer;" @click="intoListPage(1)">
<p>800</p>
<p>{{ userInfo.answer_num }}</p>
<p>我的回答</p>
</li>
<li>
<p>8.88万</p>
<p>{{ userInfo.view_num }}</p>
<p>浏览数</p>
</li>
</ul>
</div>
<div class="contributor_info">
<div class="contributor_info" v-if="contributorAnswerList">
<h3 class="contributor_title">
<span>本月回答贡献榜</span>
</h3>
......@@ -33,13 +36,13 @@
:key="'answer_' + index"
>
<span class="list_index" v-text="index + 1"></span>
<img class="list_img" :src="item.picture_path" />
<span class="list_text text_clip" v-text="item.content"></span>
<span class="list_count" v-text="item.answer_num"></span>
<img class="list_img" :src="item.picture_path || head_pic" />
<span class="list_text text_clip" v-text="item.item"></span>
<span class="list_count" v-text="item.num"></span>
</li>
</ul>
</div>
<div class="contributor_info">
<div class="contributor_info" v-if="contributorQuizList">
<h3 class="contributor_title">
<span>本月提问贡献榜</span>
</h3>
......@@ -49,9 +52,9 @@
:key="'quiz_' + index"
>
<span class="list_index" v-text="index + 1"></span>
<img class="list_img" :src="item.picture_path" />
<span class="list_text text_clip" v-text="item.content"></span>
<span class="list_count" v-text="item.answer_num"></span>
<img class="list_img" :src="item.picture_path || head_pic" />
<span class="list_text text_clip" v-text="item.item"></span>
<span class="list_count" v-text="item.num"></span>
</li>
</ul>
</div>
......@@ -64,152 +67,47 @@ export default {
components: {},
data() {
return {
contributorAnswerList: [],
contributorQuizList: [],
userInfo: null,
contributorAnswerList: null,
contributorQuizList: null,
head_pic: require("../../../assets/imgs/img_head.png"),
};
},
created() {
this.getUserInfo();
this.getAnwerList();
},
methods: {
getUserInfo() {
this.$http.get("/apaas/support/qa/info").then(({ data }) => {
if (data.success) {
this.userInfo = data.data;
}
});
},
getAnwerList() {
this.contributorAnswerList = [
{
id: 1,
title: "平台的流程引擎怎么样", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
{
id: 2,
title: "平台的流程引擎怎么样6666", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
{
id: 3,
title: "平台的流程引擎怎么样23233333", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
{
id: 4,
title: "平台的流程引擎怎么样23233333", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
{
id: 5,
title: "平台的流程引擎怎么样23233333", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
];
this.contributorQuizList = [
{
id: 1,
title: "平台的流程引擎怎么样", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
{
id: 2,
title: "平台的流程引擎怎么样6666", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
{
id: 3,
title: "平台的流程引擎怎么样23233333", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
{
id: 4,
title: "平台的流程引擎怎么样23233333", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
{
id: 5,
title: "平台的流程引擎怎么样23233333", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 9999, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
];
this.$http
.get("/apaas/support/qa/question/contribution")
.then(({ data }) => {
if (data.success) {
this.contributorAnswerList = data.data || [];
}
});
this.$http
.get("/apaas/support/qa/answer/contribution")
.then(({ data }) => {
if (data.success) {
this.contributorQuizList = data.data || [];
}
});
},
intoListPage(type) {
console.log(type === 0 ? "我的提问" : "我的回答");
if (type === 0) {
this.$router.push("/qa/questions");
} else {
this.$router.push("/qa/answers");
}
},
},
};
......@@ -247,6 +145,7 @@ export default {
font-size: 0;
}
.user_img > img {
width: 104px;
border-radius: 50%;
border: 2px solid #e3e5ef;
}
......
src/pages/technical-support/answer-center/list.vue
View file @ cb7659f4
......@@ -29,7 +29,11 @@
</el-button>
</span>
<span>
<el-input placeholder="请输入搜索内容"></el-input>
<el-input
v-model="searchText"
placeholder="请输入搜索内容"
@input="searchInput"
></el-input>
</span>
<span>
<el-button type="primary" @click="intoAnswerPage">
......@@ -48,13 +52,13 @@
@click="viewItem(item)"
>
<h3 class="answer_title" v-text="item.title"></h3>
<p class="answer_content" v-text="item.content"></p>
<p class="answer_content" v-text="getContentText(item.content)"></p>
<p class="answer_info">
<span>
<img class="user_img" :src="item.picture_path" />
<span class="user_name" v-text="item.user_name"></span>
<span class="user_text">发布于</span>
<span class="user_time" v-text="item.created"></span>
<span class="user_time" v-text="getTimeText(item.created)"></span>
</span>
<span>
<span class="num_answer" v-text="item.answer_num"></span>
......@@ -78,6 +82,7 @@
</template>
<script>
import helper from "@/services/helper.js";
import ListPagination from "@/components/comments-pagination";
export default {
......@@ -87,11 +92,13 @@ export default {
data() {
return {
answerList: [],
sortType: 0, // 0：最新问题 1：最热问题
listTotal: 0,
pageSizes: [10, 20, 50],
pageSize: 10,
currentPage: 1,
sortType: 0, // 0：最新问题 1：最热问题
searchText: "",
inputTimer: null,
};
},
created() {
......@@ -99,144 +106,38 @@ export default {
},
methods: {
getAnwerList() {
this.answerList = [
{
id: 1,
title: "平台的流程引擎怎么样", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
{
id: 2,
title: "平台的流程引擎怎么样6666", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
{
id: 3,
title: "平台的流程引擎怎么样23233333", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
{
id: 4,
title: "平台的流程引擎怎么样23233333", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
{
id: 5,
title: "平台的流程引擎怎么样23233333", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
{
id: 1,
title: "平台的流程引擎怎么样", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
{
id: 2,
title: "平台的流程引擎怎么样6666", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
{
id: 3,
title: "平台的流程引擎怎么样23233333", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
{
id: 4,
title: "平台的流程引擎怎么样23233333", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
{
id: 5,
title: "平台的流程引擎怎么样23233333", // 标题
content: "我们想用流程引擎，不会用，求大神指点", // 内容
created_by: "abc", // 发布人的userid
created: "2020-10-21T14:28:10+08:00", // 发布时间
updated: "2020-10-21T14:28:10+08:00", // 更新时间
view: 0, // 浏览量
answer_num: 2, // 回答数,
user_name: "普通neo", // 发布人
picture_path:
"http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
},
];
this.listTotal = 15;
this.$http
.get("/apaas/support/qa/question/list", {
params: {
style: 1,
order: this.sortType === 0 ? "" : "created",
search: this.searchText,
limit: this.pageSize,
page: this.currentPage,
},
})
.then(({ data }) => {
if (data.success) {
this.answerList = data.data || [];
this.listTotal = data.total;
}
});
},
selectSortType(type) {
this.sortType = type;
this.getAnwerList();
},
searchInput() {
if (this.inputTimer) {
clearTimeout(this.inputTimer);
}
this.inputTimer = setTimeout(() => {
console.log(this.searchText);
this.currentPage = 1;
this.getAnwerList();
}, 200);
},
changePageSize(value) {
this.pageSize = value;
this.currentPage = 1;
......@@ -252,6 +153,18 @@ export default {
intoAnswerPage() {
this.$router.push("/technical_support/answer_center/edit");
},
getTimeText(time) {
return helper.dateStringTransform(time || "");
},
getContentText(content) {
let text = content.replace(/<img[^>]+>/g, "【图片】");
text = text.replace(/<iframe(([\s\S])*?)<\/iframe>/g, "【视频】");
text = text.replace(/<pre(([\s\S])*?)<\/pre>/g, "【代码】");
text = text.replace(/<\/?.+?>/g, "");
return text;
},
},
};
</script>
......
src/pages/technical-support/demo-center/index.vue 0 → 100644
View file @ cb7659f4
<template>
<div class="demo_container" v-cloak>
<div class="demopage_left">
<h3 class="demopage_left_title">
<img :src="titleIcon" width="20" style="margin-right: 10px" />
<span v-text="title"></span>
</h3>
<div class="demo_menu">
<el-tree
:data="leftData"
:props="defaultProps"
default-expand-all
icon-class="el-icon-arrow-right"
accordion
@node-click="handleNodeClick"
></el-tree>
</div>
</div>
<div class="demo_page_right">
<div class="apass_breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item to="/technical_support">
技术支持
</el-breadcrumb-item>
<el-breadcrumb-item to="/technical_support/demo_center">
示例中心
</el-breadcrumb-item>
<el-breadcrumb-item>
{{ typeText }}
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="demo_page_right_l" v-if="flag">
<div class="paneHeader">
<span>源代码编辑器</span>
<div class="pull-right">
<div class="pull-btn" @click="submitTryit">
<div class="pull-icon" id="submitBTN"></div>
运行
</div>
<div class="pull-btn" @click="refresh">
<div class="pull-icon" id="refrestBTN"></div>
重置
</div>
</div>
</div>
<div class="panelCode">
<codemirror
:value="code"
@changes="changes"
:options="options"
></codemirror>
</div>
<div class="fullmap" @click="fullmap">
<span class="el-icon-arrow-left"></span>
</div>
</div>
<div :class="flag ? 'demo_page_right_r2' : 'demo_page_right_r1'">
<div id="iframewrapper">
<iframe frameborder="0" id="iframeResult"></iframe>
</div>
<div
class="closemap"
@click="closemap"
style="display: block"
v-if="!flag"
>
<i class="el-icon-arrow-right"></i>
</div>
</div>
</div>
</div>
</template>
<script>
import sideNavBar from "@/components/side-nav-bar";
import { codemirror } from "vue-codemirror";
require("codemirror/mode/htmlmixed/htmlmixed.js");
require("codemirror/mode/javascript/javascript.js");
require("codemirror/mode/css/css.js");
require("codemirror/mode/xml/xml.js");
var mixedMode = {
name: "htmlmixed",
scriptTypes: [
{
matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null,
},
{
matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript",
},
],
};
export default {
data() {
return {
titleIcon: require("@/assets/imgs/tool_ic_shili.png"),
title: "示例中心",
typeText: "arcgis server示例中心",
leftData: [],
defaultProps: {
children: "children",
label: "label",
},
flag: true,
currentName: "2d_base_map",
currentBranch: "arcgis_latest",
code: "",
};
},
methods: {
// 左侧tree选中的节点
handleNodeClick(data) {
if (data.name) {
this.currentName = data.name;
this.currentBranch = data.branch;
this.changeMap(data.branch, data.name);
}
},
fullmap() {
this.flag = false;
},
closemap() {
this.flag = true;
},
// 修改编辑
changes(code) {
this.code = code.getValue();
},
// 运行
submitTryit() {
var text = this.code;
var ifr = document.createElement("iframe");
ifr.setAttribute("frameborder", "0");
ifr.setAttribute("id", "iframeResult");
ifr.setAttribute("width", "100%");
ifr.setAttribute("height", "100%");
document.getElementById("iframewrapper").innerHTML = "";
document.getElementById("iframewrapper").appendChild(ifr);
var ifrw = ifr.contentWindow
? ifr.contentWindow
: ifr.contentDocument.document
? ifr.contentDocument.document
: ifr.contentDocument;
ifrw.document.open();
ifrw.document.write(text);
ifrw.document.close();
},
// 重置
refresh() {
this.changeMap(this.currentBranch, this.currentName);
},
//加载配置文件里面的配置数据
loadConfigTreeNodeData() {
var url = "/apaas/ui/static/view/data/arcgisTreeNode.json";
this.$http.get(url).then((res) => {
if (res.status == 200) {
var data = JSON.parse(res.bodyText).data;
this.leftData = data;
}
});
},
// 地图
changeMap(branch, page) {
var url = "";
if (branch == "arcgis_latest") {
url =
"/apaas/ui/static/view/demo/page-" + page + ".html?" + Math.random();
this.$http
.get(url)
.then((response) => {
this.code = response.data;
var ifr = document.getElementById("iframeResult");
// ifr.src =
// "./static/view/latest/page-" + page + ".html?" + Math.random();
ifr.src = url;
})
.catch(function (response) {
console.log(response);
});
}
},
},
components: {
codemirror,
},
mounted() {
this.loadConfigTreeNodeData();
this.changeMap(this.currentBranch, this.currentName);
},
computed: {
options() {
return {
mode: mixedMode,
tabSize: 2,
lineNumbers: false,
lineWrapping: true,
smartIndent: true,
theme: "cobalt",
};
},
},
};
</script>
<style scoped>
.demo_container {
height: calc(100vh - 58px);
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.demopage_left {
position: relative;
width: 250px;
height: 100%;
background-color: #0d1847;
}
.demopage_left_title {
height: 40px;
background-color: #182665;
border-radius: 10px;
overflow: hidden;
margin: 20px 32px 20px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.demopage_left_title > span {
font-size: 16px;
color: #c3caf8;
}
.demo_menu {
position: relative;
height: calc(100vh - 58px - 40px - 40px);
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.demo_page_right {
box-sizing: border-box;
position: relative;
width: calc(100vw - 250px);
padding: 0px 20px 30px;
height: 100%;
}
.demo_page_right_l {
position: relative;
width: 495px;
height: calc(100% - 46px);
z-index: 2;
}
.paneHeader {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
line-height: 46px;
border-top: 4px solid #fa7d0f;
border-bottom: 1px solid #1e262d;
background: #2a333a;
font-size: 16px;
padding-left: 10px;
box-sizing: border-box;
color: #c3caf8;
z-index: 9;
border-radius: 12px 0 0 0;
}
.paneHeader .pull-right {
position: absolute;
top: 0;
right: 0;
height: 49px;
}
.paneHeader .pull-right .pull-btn {
position: relative;
float: left;
line-height: 46px;
border-left: 1px solid #1e262d;
vertical-align: middle;
font-size: 14px;
color: #ffffff;
padding-left: 32px;
padding-right: 10px;
cursor: pointer;
text-decoration: none;
}
.paneHeader .pull-right .pull-btn .pull-icon {
position: absolute;
top: 16px;
left: 8px;
width: 16px;
height: 16px;
background-size: contain;
}
#submitBTN {
background-image: url("~@/assets/imgs/demo_logo.png");
}
#refrestBTN {
background-image: url("~@/assets/imgs/demo_logo.png");
}
.panelCode {
position: relative;
top: 50px;
height: calc(100% - 50px);
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
border-radius: 0 0 0 12px;
}
.fullmap {
position: absolute;
right: 0;
top: 50%;
margin-top: -30px;
width: 14px;
height: 60px;
background-color: #6f7377;
cursor: pointer;
z-index: 1002;
line-height: 60px;
vertical-align: middle;
text-align: center;
color: #333333;
border-radius: 6px 0 0 6px;
}
.closemap {
position: absolute;
left: 0;
top: 50%;
margin-top: -30px;
width: 14px;
height: 60px;
background-color: #6f7377;
cursor: pointer;
z-index: 1002;
line-height: 60px;
vertical-align: middle;
text-align: center;
color: #333333;
border-radius: 0 6px 6px 0;
display: none;
}
.demo_page_right_r1 {
position: absolute;
left: 20px;
top: 46px;
bottom: 30px;
right: 20px;
height: calc(100% - 46px - 30px);
}
.demo_page_right_r2 {
position: absolute;
left: 515px;
top: 46px;
bottom: 30px;
right: 20px;
height: calc(100% - 46px - 30px);
}
#iframewrapper {
height: 100%;
position: relative;
}
#iframeResult {
position: absolute;
top: 0;
border: 0 !important;
min-width: 100px;
width: 100%;
height: 100%;
}
</style>
<style>
[v-cloak] {
display: none;
}
.apass_breadcrumb > .el-breadcrumb {
padding: 12px 0 11px;
}
/* 设置滚动条样式 */
.demo_menu::-webkit-scrollbar,
.CodeMirror-vscrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.CodeMirror-vscrollbar::-webkit-scrollbar {
background-color: #333333;
}
.demo_menu::-webkit-scrollbar-track-piece,
.CodeMirror-vscrollbar::-webkit-scrollbar-track-piece {
background-color: rgba(255, 255, 255, 0.1);
-webkit-border-radius: 6px;
}
.demo_menu::-webkit-scrollbar-thumb:vertical,
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 6px;
}
.demo_menu::-webkit-scrollbar-thumb:horizontal,
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 6px;
}
/* 设置左侧样式 */
.demo_menu .el-tree {
background: none;
font-family: MicrosoftYaHei-Bold;
font-size: 14px;
color: #b4c0f5;
}
.demo_menu .el-tree-node .is-expanded > .el-tree-node__children {
background: none;
color: #6573ae;
}
.demo_menu .el-tree-node__content {
height: 48px;
position: relative;
}
.demo_menu .el-tree-node__content > .el-tree-node__expand-icon {
position: absolute;
right: 22px;
padding: 0;
}
.demo_menu .el-tree-node__label {
padding-left: 24px;
}
.demo_menu .el-tree-node__content:hover {
background-color: #182665;
color: #e6ebfe;
border-left: 5px solid #fa7d0f;
}
.demo_menu .el-tree-node:focus > .el-tree-node__content {
background-color: #182665;
color: #e6ebfe;
border-left: 5px solid #fa7d0f;
}
.demo_menu .el-tree-node:focus > .el-tree-node__content .el-tree-node__label {
color: #e6ebfe;
}
/* 设置codeMirror样式 */
.vue-codemirror {
height: 100%;
}
/* 设置编辑器里的样式 */
.cm-s-cobalt.CodeMirror {
height: 100%;
background: #2a333a;
color: white;
}
.cm-s-cobalt div.CodeMirror-selected {
background: #b36539;
}
.cm-s-cobalt .CodeMirror-line::selection,
.cm-s-cobalt .CodeMirror-line > span::selection,
.cm-s-cobalt .CodeMirror-line > span > span::selection {
background: rgba(179, 101, 57, 0.99);
}
.cm-s-cobalt .CodeMirror-line::-moz-selection,
.cm-s-cobalt .CodeMirror-line > span::-moz-selection,
.cm-s-cobalt .CodeMirror-line > span > span::-moz-selection {
background: rgba(179, 101, 57, 0.99);
}
.cm-s-cobalt .CodeMirror-gutters {
background: #2a333a;
border-right: 1px solid #2a333a;
}
.cm-s-cobalt .CodeMirror-guttermarker {
color: #ffee80;
}
.cm-s-cobalt .CodeMirror-guttermarker-subtle {
color: #d0d0d0;
}
.cm-s-cobalt .CodeMirror-linenumber {
color: #d0d0d0;
}
.cm-s-cobalt .CodeMirror-cursor {
border-left: 1px solid white;
}
.cm-s-cobalt span.cm-comment {
color: #08f;
}
.cm-s-cobalt span.cm-atom {
color: #845dc4;
}
.cm-s-cobalt span.cm-number,
.cm-s-cobalt span.cm-attribute {
color: #ff80e1;
}
.cm-s-cobalt span.cm-keyword {
color: #ffee80;
}
.cm-s-cobalt span.cm-string {
color: #3ad900;
}
.cm-s-cobalt span.cm-meta {
color: #ff9d00;
}
.cm-s-cobalt span.cm-variable-2,
.cm-s-cobalt span.cm-tag {
color: #9effff;
}
.cm-s-cobalt span.cm-variable-3,
.cm-s-cobalt span.cm-def {
color: white;
}
.cm-s-cobalt span.cm-bracket {
color: #d8d8d8;
}
.cm-s-cobalt span.cm-builtin,
.cm-s-cobalt span.cm-special {
color: #ff9e59;
}
.cm-s-cobalt span.cm-link {
color: #845dc4;
}
.cm-s-cobalt span.cm-error {
color: #9d1e15;
}
.cm-s-cobalt .CodeMirror-activeline-background {
background: #002d57;
}
.cm-s-cobalt .CodeMirror-matchingbracket {
outline: 1px solid grey;
color: white !important;
}
</style>
src/pages/technical-support/doc-manage/index.vue
View file @ cb7659f4
......@@ -23,11 +23,6 @@ export default {
data: () => ({
navList: [],
}),
watch: {
"$route.fullPath"(path) {
this.initNavList();
},
},
methods: {
initNavList() {
this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
......
src/pages/technical-support/doc/detail.vue
View file @ cb7659f4
......@@ -14,51 +14,28 @@
</el-breadcrumb>
</div>
<div class="main_container">
<div class="part doc_part">
<h3 class="part_title">
<span>{{ title || typeText }}</span>
<span>更新时间：{{ update_time }}</span>
</h3>
<div
class="part_content doc_content apaas_scroll"
v-html="content"
ref="docContent"
></div>
</div>
<div class="part nav_part">
<h3 class="part_title">
<span>导航</span>
</h3>
<ul class="part_content nav_content apaas_scroll">
<li
v-for="(item, index) in navTree"
:class="[
'text_clip',
'level_' + item.level,
item.id === curNav ? ' current' : '',
]"
:key="index"
>
<a v-text="item.title" @click="clickNav(item)"></a>
</li>
</ul>
</div>
</div>
<doc-width-nav
class="main_container"
:title="title"
:time="update_time"
:rich-text="content"
></doc-width-nav>
</div>
</template>
<script>
import helper from "@/services/helper.js";
import DocWidthNav from "@/components/doc-width-nav.vue";
export default {
components: {
DocWidthNav,
},
data() {
return {
title: "",
update_time: "",
content: "",
navTree: [],
curNav: "",
};
},
computed: {
......@@ -87,59 +64,6 @@ export default {
},
methods: {
getContent() {
let successCallback = (content) => {
let titles =
content.match(
/<h1(([\s\S])*?)<\/h1>|<h2(([\s\S])*?)<\/h2>|<h3(([\s\S])*?)<\/h3>/g
) || [];
let time = new Date().getTime();
let pre_h1_index = 0;
let pre_h2_index = 0;
let pre_h3_index = 0;
let newTitles = titles
.map((title, index) => {
let newTitle = title;
let level = 0;
let id = "";
if (title.match(/<h1(([\s\S])*?)<\/h1>/g)) {
pre_h1_index++;
pre_h2_index = 0;
pre_h3_index = 0;
level = 1;
id = `nav_${pre_h1_index}` + "_" + time;
newTitle = title.replace(/<h1/g, `<h1 id="${id}"`);
} else if (title.match(/<h2(([\s\S])*?)<\/h2>/g)) {
pre_h2_index++;
pre_h3_index = 0;
level = 2;
id = `nav_${pre_h1_index}_${pre_h2_index}` + "_" + time;
newTitle = title.replace(/<h2/g, `<h2 id="${id}"`);
} else if (title.match(/<h3(([\s\S])*?)<\/h3>/g)) {
pre_h3_index++;
level = 3;
id = `nav_${pre_h1_index}_${pre_h2_index}_${pre_h3_index}`;
newTitle = title.replace(/<h3/g, `<h3 id="${id}"`) + "_" + time;
}
content = content.replace(new RegExp(title), newTitle);
return {
level,
id,
title: title.replace(/<\/?.+?>/g, ""),
};
})
.filter((item) => item.title);
this.content = content;
this.navTree = newTitles;
this.curNav = (newTitles[0] && newTitles[0].id) || "";
};
this.$http
.get("/apaas/support/document/get", {
params: {
......@@ -152,7 +76,7 @@ export default {
this.update_time = this.getTimeText(data.data.updated);
if (data.data.content) {
successCallback(data.data.content);
this.content = data.data.content;
}
}
});
......@@ -160,23 +84,6 @@ export default {
getTimeText(time) {
return helper.dateStringTransform(time);
},
clickNav(item) {
let target = document.querySelector(`#${item.id}`);
this.setScroll(target, this.$refs.docContent);
this.curNav = item.id;
},
setScroll(el, parentEl) {
let actualTop = el.offsetTop;
let current = el.offsetParent;
while (current !== null) {
actualTop += current.offsetTop;
current = current.offsetParent;
}
parentEl.scrollTop = actualTop - parentEl.offsetTop;
},
},
};
</script>
......@@ -189,102 +96,5 @@ export default {
}
.main_container {
height: calc(100% - 53px);
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.main_container > .part {
background-color: #fff;
border-radius: 10px;
padding-bottom: 20px;
box-sizing: border-box;
box-sizing: 0;
}
.main_container > .part + .part {
margin-left: 20px;
}
.doc_part {
flex-grow: 1;
}
.nav_part {
width: 270px;
flex-shrink: 0;
}
.part_title {
padding: 10px 20px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.part_title::after {
content: "";
position: absolute;
right: 0;
left: 0;
bottom: 0;
border-bottom: 1px solid #e3e5ef;
}
.part_title > span:nth-child(1) {
font-size: 18px;
font-weight: bold;
line-height: 36px;
color: #58617a;
position: relative;
padding-left: 15px;
}
.part_title > span:nth-child(1)::before {
content: "";
width: 4px;
height: 18px;
background-color: #515fe7;
border-radius: 2px;
position: absolute;
top: 10px;
left: 0;
}
.part_title > span:nth-child(2) {
font-size: 14px;
line-height: 24px;
color: #8890a7;
padding-left: 20px;
background-image: url("../../../assets/imgs/shop_ic_updatetime.png");
background-repeat: no-repeat;
background-position: left center;
}
.part_content {
height: calc(100% - 76px);
margin-top: 20px;
box-sizing: border-box;
overflow: auto;
}
.doc_content {
padding: 0 20px;
}
.nav_content {
padding-left: 20px;
}
.nav_content > li > a {
display: block;
height: 30px;
padding: 0 20px;
font-size: 14px;
line-height: 30px;
color: #58617a;
text-decoration: none;
cursor: pointer;
}
.nav_content > li.level_1 > a {
color: #242c43;
}
.nav_content > li.level_2 > a {
text-indent: 2em;
}
.nav_content > li.level_3 > a {
text-indent: 4em;
}
.nav_content > li.current > a {
background-color: #e6ebfe;
color: #515fe7;
}
</style>
src/pages/technical-support/sdk-manage/index.vue 0 → 100644
View file @ cb7659f4
<template>
<div class="doc_container">
<side-nav-bar
title="SDK管理"
imgSrc="tool_ic_kaifawendang"
:nav-list="navList"
:title-path="navList[0] && navList[0].path"
style="width: 200px;"
></side-nav-bar>
<div class="main_container">
<router-view />
</div>
</div>
</template>
<script>
import sideNavBar from "@/components/side-nav-bar";
export default {
components: {
sideNavBar,
},
data: () => ({
navList: [],
}),
methods: {
initNavList() {
this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
if (response.data.success == 1) {
let arr = response.data.data[0].Child;
for (let i = 0; i < arr.length; i++) {
let first = arr[i];
if (first.visit_url == "/technical_support") {
for (let j = 0; j < first.Child.length; j++) {
let second = first.Child[j];
if (second.visit_url == "/technical_support/sdk_manage") {
this.navList = second.Child.map((item) => ({
name: item.menu_name,
path: item.visit_url,
}));
break;
}
}
break;
}
}
}
});
},
},
mounted() {
this.initNavList();
},
};
</script>
<style scoped>
.doc_container {
height: calc(100vh - 58px);
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.side_nav_bar {
width: 180px;
flex-shrink: 0;
}
.main_container {
width: calc(100% - 180px);
flex-grow: 1;
flex-shrink: 1;
background-color: #f6f7fb;
overflow: auto;
}
</style>
src/pages/technical-support/sdk-manage/list.vue 0 → 100644
View file @ cb7659f4
<template>
<div class="doc_manage_container">
<apass-list
ref="list"
search-placeholder="请输入关键字"
:hide-search="true"
:list-total="listTotal"
:list-header="listHeader"
:list-data="listData"
:list-padding-left="paddingLeft"
@list-action="init"
>
<el-breadcrumb separator="/" slot="breadcrumb">
<el-breadcrumb-item to="/technical_support">
技术支持
</el-breadcrumb-item>
<el-breadcrumb-item to="/technical_support/doc_manage">
开发文档
</el-breadcrumb-item>
<el-breadcrumb-item>
管理列表
</el-breadcrumb-item>
</el-breadcrumb>
<template slot="header-left">
<el-button type="primary" @click="addNew">
新建
</el-button>
</template>
<template slot="top">
<div class="top_fliter">
<show-more-filter class="filter_list">
<div class="filter_item">
<span class="filter_title">文档名称：</span>
<el-input
v-model="topFilter.name"
placeholder="请输入banner关键词"
@keyup.enter.native="topFilterAction"
></el-input>
</div>
<div class="filter_item">
<span class="filter_title">文档类型：</span>
<el-select v-model="topFilter.type" placeholder="请选择">
<el-option label="全部" value=""></el-option>
<el-option
v-for="(item, index) in types"
:key="'top_type_' + index"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="filter_item">
<span class="filter_title">最后更新时间：</span>
<el-date-picker
v-model="topFilter.time"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</div>
</show-more-filter>
<div class="filter_action apaas_button">
<el-button type="primary" @click="topFilterAction">
查询
</el-button>
<el-button type="defalut" @click="topFilterClear">
重置
</el-button>
</div>
</div>
</template>
</apass-list>
<apass-dialog ref="addDialog" title="新增">
<div class="add_content" slot="content">
<div class="add_notice">
<p>注：同一文档类型下可维护多个文档名称</p>
</div>
<el-form ref="addForm" :model="addForm" :rules="addFormRules">
<el-form-item label="活动区域" prop="style">
<el-select
v-model="addForm.style"
placeholder="请选择文档类型"
style="width: 100%;"
>
<el-option
v-for="(item, index) in types"
:key="'add_type_' + index"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="文档名称" prop="title">
<el-input
v-model="addForm.title"
placeholder="请输入文档名称"
></el-input>
</el-form-item>
</el-form>
</div>
<template slot="action">
<el-button type="defalut" size="mini" @click="AddCancelAction">
取消
</el-button>
<el-button type="primary" size="mini" @click="AddSubmitAction">
确定
</el-button>
</template>
</apass-dialog>
<apass-dialog
ref="detailDialog"
:title="detail.title"
class="doc_manage_detail_dialog"
width="1340px"
>
<div
class="detail_content apaas_scroll"
slot="content"
v-html="detail.content"
></div>
</apass-dialog>
<apass-dialog
ref="deleteDialog"
:msg="deleteDialogInfo.msg"
:submit="deleteDialogInfo.submit"
></apass-dialog>
</div>
</template>
<script>
import helper from "@/services/helper.js";
import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog";
import showMoreFilter from "@/components/show-more-filter";
export default {
components: {
apassList,
apassDialog,
showMoreFilter,
},
data() {
return {
paddingLeft: 25,
listTotal: 0,
listHeader: [
{
label: "文档名称",
prop: "title",
type: "button",
callback: this.viewItem,
width: 320,
},
{
label: "文档类型",
prop: "style",
getText: (item) => {
let type = this.types[item.style] || null;
return (type && type.label) || "";
},
align: "center",
},
{
label: "操作人",
prop: "created_by",
align: "center",
},
{
label: "最后更新时间",
prop: "updated",
getText: ({ updated }) => this.getTimeText(updated || ""),
align: "center",
},
{
label: "操作",
type: "buttons",
align: "center",
width: 240,
actionList: [
{
label: "编辑",
callback: this.editItem,
},
{
label: "删除",
callback: this.deleteItem,
class: "warn",
},
],
},
],
listData: [],
topFilter: {
name: "",
type: "",
time: "",
},
types: [
{
label: "平台简介",
value: 0, // "introductory",
},
{
label: "使用须知",
value: 1, // "notice",
},
{
label: "术语说明",
value: 2, // "trem",
},
{
label: "标准规范",
value: 3, // "standard",
},
{
label: "操作指南",
value: 4, // "guide",
},
{
label: "接口文档",
value: 5, // "api",
},
{
label: "常见问题",
value: 6, // "questions",
},
],
addForm: {
style: "",
title: "",
},
addFormRules: {
style: [
{ required: true, message: "请选择文档类型", trigger: "change" },
],
title: [
{ required: true, message: "请输入文档名称", trigger: "blur" },
{ max: 20, message: "长度应小于20个字符", trigger: "change" },
],
},
detail: "",
deleteDialogInfo: {
msg: "",
submit: null,
},
tempFilter: {},
};
},
methods: {
init(filter) {
let fullFilter = {
...filter,
...this.topFilter,
};
this.tempFilter = filter;
this.$http
.get("/apaas/support/document/list", {
params: {
style: fullFilter.type,
start: fullFilter.time && fullFilter.time[0],
end: fullFilter.time && fullFilter.time[1],
limit: fullFilter.size,
page: fullFilter.page,
},
})
.then(({ data }) => {
if (data.success === 1) {
this.listTotal = data.total;
this.listData = data.data || [];
}
});
},
getTimeText(time) {
return helper.dateStringTransform(time);
},
topFilterAction() {
this.refreshPage();
},
topFilterClear() {
this.topFilter = {
name: "",
type: "",
time: "",
};
this.refreshPage();
},
refreshPage() {
this.$refs.list.resetCurrentPage();
},
viewItem(item) {
this.$http
.get("/apaas/support/document/get", {
params: {
id: item.id,
},
})
.then(({ data }) => {
if (data.success === 1) {
this.detail = data.data;
}
});
this.$refs.detailDialog.show();
},
editItem(item) {
this.$router.push(`/technical_support/doc_manage/edit/${item.id}`);
},
deleteItem(item) {
this.deleteDialogInfo.msg = `是否删除《${item.title}》？`;
this.deleteDialogInfo.submit = () => {
this.$http
.delete("/apaas/support/document/delete", {
params: {
id: item.id,
},
})
.then(({ data }) => {
if (data.success === 1) {
this.$message.success("删除成功");
this.init(this.tempFilter);
} else {
this.$message.error("删除失败");
}
})
.catch((error) => {
console.log(error);
this.$message.error("删除失败");
});
};
this.$refs.deleteDialog.show();
},
addNew() {
this.addForm = {
style: 0,
title: "",
};
this.$refs.addDialog.show();
},
AddCancelAction() {
this.$refs.addDialog.hide();
},
AddSubmitAction() {
this.$refs.addForm.validate((valid) => {
if (valid) {
this.$http
.get("/apaas/support/document/checkTitle", {
params: this.addForm,
})
.then(({ data }) => {
if (data.success === 1) {
this.$http
.post("/apaas/support/document/create", {
...this.addForm,
content: "",
})
.then(({ data }) => {
if (data.success === 1) {
this.$message.success("新增成功");
this.editItem(data.data);
} else {
this.$message.error(data.errMsg || "新增失败");
}
})
.catch((error) => {
console.log(error);
this.$message.error("新增失败");
});
} else {
this.$message.error("验证失败");
}
})
.catch((error) => {
console.log(error);
this.$message.error("验证失败");
});
} else {
return false;
}
});
},
},
};
</script>
<style scoped>
.doc_manage_container {
height: 100%;
}
.add_notice {
display: inline-block;
margin: 10px auto;
background-color: #f4f7fc;
border-radius: 8px;
padding: 10px;
}
.add_notice > p {
font-size: 12px;
line-height: 16px;
color: #58617a;
padding-left: 20px;
background-image: url("../../../assets/imgs/ic_tishi.png");
background-repeat: no-repeat;
background-position: left center;
}
.detail_content {
height: 650px;
overflow: auto;
text-align: left;
}
</style>
<style>
.doc_manage_detail_dialog .el-dialog__body {
padding: 10px;
}
.doc_manage_detail_dialog .el-dialog__footer {
display: none;
}
</style>
src/pages/technical-support/sdk-manage/type/index.vue 0 → 100644
View file @ cb7659f4
<template>
<div class="doc_manage_container">
<apass-list
ref="list"
search-placeholder="请输入关键字"
:list-padding-left="paddingLeft"
:hide-search="true"
:list-total="listTotal"
:list-header="listHeader"
:list-data="listData"
@list-action="init"
>
<el-breadcrumb separator="/" slot="breadcrumb">
<el-breadcrumb-item to="/technical_support">
技术支持
</el-breadcrumb-item>
<el-breadcrumb-item to="/technical_support/doc_manage">
SDK管理
</el-breadcrumb-item>
<el-breadcrumb-item>
SDK类型管理
</el-breadcrumb-item>
</el-breadcrumb>
<template slot="top">
<div class="top_fliter">
<show-more-filter class="filter_list">
<div class="filter_item">
<span class="filter_title">SDK类型：</span>
<el-select v-model="topFilter.type" placeholder="请选择">
<el-option label="全部" value=""></el-option>
<el-option
v-for="(item, index) in types"
:key="'top_type_' + index"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="filter_item">
<span class="filter_title">最后更新时间：</span>
<el-date-picker
v-model="topFilter.time"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</div>
</show-more-filter>
<div class="filter_action apaas_button">
<el-button type="primary" @click="topFilterAction">
查询
</el-button>
<el-button type="defalut" @click="topFilterClear">
重置
</el-button>
</div>
</div>
</template>
</apass-list>
</div>
</template>
<script>
import helper from "@/services/helper.js";
import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog";
import showMoreFilter from "@/components/show-more-filter";
export default {
components: {
apassList,
apassDialog,
showMoreFilter,
},
data() {
return {
paddingLeft: 25,
listTotal: 0,
listHeader: [],
listData: [],
topFilter: {
type: "",
time: "",
},
types: [],
tempFilter: {},
};
},
methods: {
init(filter) {
let fullFilter = {
...filter,
...this.topFilter,
};
this.tempFilter = filter;
console.log(fullFilter);
},
topFilterClear() {
this.topFilter = {
name: "",
type: "",
time: "",
};
this.refreshPage();
},
topFilterAction() {
this.refreshPage();
},
refreshPage() {
this.$refs.list.resetCurrentPage();
},
},
};
</script>
src/pages/technical-support/sdk/detail.vue 0 → 100644
View file @ cb7659f4
<template>
<div class="sdk_container">
<div class="apass_breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item to="/technical_support">
技术支持
</el-breadcrumb-item>
<el-breadcrumb-item to="/technical_support/doc">
SDK中心
</el-breadcrumb-item>
<el-breadcrumb-item>
{{ typeText }}
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="download_action apaas_button" v-if="sdkInfo">
<span>SDK下载</span>
<span>版本号：{{ sdkInfo.version }}</span>
<span>发布日期：{{ sdkInfo.time }}</span>
<el-button type="primary" @click="downloadUrl(sdkInfo.url)">
下载SDK
</el-button>
</div>
<doc-width-nav
class="main_container"
:title="title"
:time="update_time"
:rich-text="content"
></doc-width-nav>
</div>
</template>
<script>
import helper from "@/services/helper.js";
import DocWidthNav from "@/components/doc-width-nav.vue";
export default {
components: {
DocWidthNav,
},
data() {
return {
title: "",
update_time: "",
content: "",
sdkInfo: null,
};
},
computed: {
typeText() {
return this.$route.params.type || "SDK";
},
sdkId() {
return this.$route.params.id;
},
},
created() {
this.getContent();
},
methods: {
getContent() {
this.sdkInfo = {
version: "100.9.0",
time: "2020-08-27",
url: "http://pic1.win4000.com/tj/2020-10-19/5f8d3a49abc54.jpg",
};
this.title = "标题";
this.update_time = "2020-10-26 10:00:00";
this.content = `
<h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1><img src="http://pic1.win4000.com/tj/2020-10-19/5f8d3a49abc54.jpg" style="font-size: 14px; max-width: 100%;"></h1><h1><a href="https://www.baidu.com" target="_blank" style="font-size: 14px;">链接</a></h1><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h1>产品简介</h1><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h2>产品简介</h2><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能力</p><p><br></p><h3>产品简介</h3><p>BD-aPaaS平台（V3.0）基于BD-aPaaS平台（V2.0）进行整体架构调整的升级研发。BD-aPaaS平台（V3.0）定位于PaaS层，偏重于支撑和管理SaaS层的应用和系统，是基于微服务架构、云网全面互联的大数据服务支撑平台，集城市信息资源规划、建设、治理、管理、融合、共享、分析、服务为一体，能够释放政府和行业沉淀在业务系统中的能</p><h1></h1>
`;
},
getTimeText(time) {
return helper.dateStringTransform(time);
},
downloadUrl(url) {
let a = document.createElement("a");
a.setAttribute("download", "");
a.setAttribute("href", url);
a.click();
},
},
};
</script>
<style scoped>
.sdk_container {
height: 100%;
padding: 0 20px 30px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
box-sizing: border-box;
}
.main_container {
flex-grow: 1;
height: calc(100% - 53px);
}
.download_action {
background-color: #fff;
border-radius: 10px;
padding: 10px 20px;
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 20px;
}
.download_action > span:nth-child(1) {
font-size: 18px;
font-weight: bold;
line-height: 36px;
color: #58617a;
position: relative;
padding-left: 15px;
}
.download_action > span:nth-child(1)::before {
content: "";
width: 4px;
height: 18px;
background-color: #515fe7;
border-radius: 2px;
position: absolute;
top: 10px;
left: 0;
}
.download_action > span:nth-child(2),
.download_action > span:nth-child(3) {
font-size: 14px;
line-height: 24px;
color: #8890a7;
padding-left: 20px;
background-position: left center;
}
.download_action > span:nth-child(2) {
background-image: url("/../assets/imgs/shop_ic_updatetime.png");
}
.download_action > span:nth-child(3) {
background-image: url("/../assets/imgs/shop_ic_updatetime.png");
}
.download_action > .el-button {
margin-left: auto;
}
</style>
src/pages/technical-support/sdk/index.vue 0 → 100644
View file @ cb7659f4
<template>
<div class="page_container">
<side-nav-bar
title="SDK中心"
imgSrc="tool_ic_kaifawendang"
:nav-list="navList"
:title-path="navList[0] && navList[0].path"
style="width: 250px;"
></side-nav-bar>
<div class="main_container">
<router-view :key="$route.params.type + $route.params.id" />
</div>
</div>
</template>
<script>
import sideNavBar from "@/components/side-nav-bar";
export default {
components: {
sideNavBar,
},
data: () => ({
navList: [],
}),
methods: {
initNavList() {
let activePath = "";
let baseUrl = "/technical_support/sdk";
let data = [
{
name: "JavaScript SDK",
id: 1,
children: [
{
name: "在地图上添加图层",
id: 101,
},
{
name: "测测测自己创建测",
id: 102,
},
],
},
{
name: "Android SDK",
id: 2,
children: [
{
name: "Android",
id: 201,
},
{
name: "测测测自己创建测",
id: 202,
},
],
},
];
this.navList = data.map((item) => {
let children = item.children;
let nav = {
name: item.name,
path: `${baseUrl}/${item.name}`,
};
if (children.length > 0) {
nav.children = children.map((v) => {
let path = `${baseUrl}/${item.name}/${v.id}`;
if (activePath === "") {
activePath = path;
}
return {
name: v.name,
path: path,
};
});
nav.open = true;
} else {
nav.disabled = true;
}
return nav;
});
if (activePath && this.$route.params.id === undefined) {
this.$router.push(activePath);
} else if (activePath === "") {
this.$message.error("您尚未创建任何SDK文档");
}
},
},
mounted() {
this.initNavList();
},
};
</script>
<style scoped>
.page_container {
height: calc(100vh - 58px);
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.side_nav_bar {
width: 180px;
flex-shrink: 0;
}
.main_container {
width: calc(100% - 180px);
flex-grow: 1;
flex-shrink: 1;
background-color: #f6f7fb;
overflow: auto;
}
</style>
src/pages/user/my-coin.vue 0 → 100644
View file @ cb7659f4
<template>
<div class="my_qa">
<el-breadcrumb separator="/" class="bread_crumb1 bread_left">
<el-breadcrumb-item :to="{ path: '/user' }">{{
$t("lang.personal_center")
}}</el-breadcrumb-item>
<el-breadcrumb-item>{{
$t("lang.my_questions_and_answers")
}}</el-breadcrumb-item>
</el-breadcrumb>
<BlockRadius class="info_block user_qa">
<div class="left_user">
<div class="img_head">
<img :src="user_info.picture_path" class="img_head_in" />
</div>
<div class="left_word">
<p class="left_name">{{ user_info.user_name }}</p>
<p class="left_role">{{ user_info.role }}</p>
</div>
</div>
<div class="right_list">
<div class="user_qa_card my_a">
<img src="@/assets/imgs/wdjb_ic_zhye.png" />
<div class="card_word">
<p class="card_name">账户余额</p>
<p>
{{ helper.numberFormat(user_info.answer_num)
}}<span v-if="user_info.answer_num > 10000" class="card_wan">
万
</span>
</p>
</div>
</div>
<div class="user_qa_card my_view">
<img src="@/assets/imgs/wdjb_ic_czbs.png" />
<div class="card_word">
<p class="card_name">充值笔数</p>
<p>
{{ helper.numberFormat(user_info.view_num)
}}<span v-if="user_info.view_num > 10000" class="card_wan">
万
</span>
</p>
</div>
</div>
</div>
</BlockRadius>
<BlockRadius class="block_down info_block">
<div class="czjl">
<div class="czjl_p">
充值记录
<el-tooltip
class="tool_item"
effect="dark"
content="充值明细（如需进行充值，请线下联系平台超级管理员）"
placement="top-start"
offset="5"
>
<img class="tool_img" src="@/assets/imgs/tool_ic_tips.png" />
</el-tooltip>
</div>
<el-date-picker
v-model="date"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
:clearable="false"
></el-date-picker>
</div>
<apass-table
class="apa_table"
ref="outtreetable"
:data="tableData"
:header="table_header"
></apass-table>
<list-pagination
:total="total_list"
:page-sizes="[50, 20, 10]"
:page-size="currentlimit"
:current-page="currentPage"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></list-pagination>
</BlockRadius>
</div>
</template>
<script>
import BlockRadius from "@/components/general/block-radius";
import apassTable from "@/components/apass-table";
import listPagination from "@/components/comments-pagination";
import helper from "@/services/helper.js";
export default {
components: {
BlockRadius,
apassTable,
listPagination,
},
data: () => ({
helper,
user_info: {
user_name: "",
role: "",
question_num: 0,
answer_num: 0,
view_num: 0,
picture_path: "",
},
tableData: [{}, {}],
table_header: [],
total_list: 0,
currentPage: 1,
currentlimit: 10,
date: [],
}),
watch: {},
methods: {
handleSizeChange(val) {
this.pagination.rowsPerPage = val;
this.refreshData();
},
handleCurrentChange(val) {
this.pagination.page += val;
this.refreshData();
},
getUserCoin() {
this.$api.user.getUserQA().then((response) => {
if (response.data.success == 1) {
this.user_info = response.data.data;
}
});
},
selectnum({ select, rows }) {
this.num = select.length;
this.selected_date = select;
},
getCoinList() {
let query = {
start: this.date.length != 0 ? this.date[0] : "",
end: this.date.length != 0 ? this.date[1] : "",
};
console.log(query)
this.$api.user.getUserQA().then((response) => {
if (response.data.success == 1) {
this.user_info = response.data.data;
}
});
},
},
mounted() {
this.getUserCoin();
this.getCoinList();
this.table_header = [
{
prop: "title",
label: "充值流水ID",
align: "center",
type: "html",
getHtml: (str) => {
return `<span style="color:#0f2683;font-weight:bold;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="${str.title}">123123</span>`;
},
},
{
prop: "content",
label: "充值金额（金币/个）",
align: "center",
type: "html",
getHtml: (str) => {
return `<span style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">123123123</span>`;
},
},
{
prop: "answer_num",
label: "账户余额（金币/个）",
align: "center",
},
{
prop: "created",
label: "充值时间",
align: "center",
type: "html",
getHtml: (str) => {
return `<span>${helper.dateStringTransform(str.created)}</span>`;
},
},
];
},
};
</script>
<style scoped>
.my_qa {
/* height: calc(100% - 20px); */
height: calc(100%);
overflow: hidden;
}
.info_block {
margin: 0 20px 20px;
position: relative;
}
.block_down {
height: calc(100% - 214px);
}
.czjl {
height: 50px;
position: relative;
display: flex;
justify-content: space-between;
top: -6px;
}
.czjl::after {
content: "";
position: absolute;
left: -20px;
bottom: 0;
width: calc(100% + 40px);
height: 1px;
background-color: #e6ebfe;
}
.czjl_p {
font-weight: bold;
padding-left: 20px;
position: relative;
font-size: 16px;
top: 8px;
}
.czjl_p::after {
position: absolute;
content: "";
width: 4px;
height: 16px;
background-color: #515fe7;
border-radius: 2px;
left: 8px;
top: 3px;
}
.apa_table {
height: calc(100% - 90px);
}
.user_qa {
height: 120px;
display: flex;
justify-content: space-between;
}
.left_user {
width: 300px;
display: flex;
justify-content: space-between;
}
.img_head {
width: 76px;
height: 76px;
margin: 2px 10px;
border-radius: 50%;
overflow: hidden;
border: solid 2px #e3e5ef;
}
.img_head_in {
width: 100%;
height: 100%;
}
.left_word {
width: 200px;
padding-top: 5px;
}
.left_name {
color: #1d1e20;
font-size: 22px;
line-height: 44px;
}
.left_role {
color: #8890a7;
font-size: 14px;
}
.right_list {
width: 40%;
min-width: 550px;
max-width: 700px;
display: flex;
justify-content: space-between;
}
.user_qa_card {
width: 49%;
height: 80px;
border-radius: 10px 10px 10px 40px;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 34px;
font-family: Arial;
font-weight: bold;
text-align: right;
}
.my_q {
background-color: #fcefd6;
color: #ef9433;
}
.my_a {
background-color: #e7fdfc;
color: #25bdb1;
}
.my_view {
background-color: #e5f4fe;
color: #38aef9;
}
.card_word {
}
.card_name {
color: #242c43;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: normal;
}
.card_wan {
font-size: 14px;
}
</style>
<style scoped>
.com-pagination {
margin-top: 20px;
font-size: 14px;
padding: 0 5%;
display: flex;
justify-content: space-between;
align-items: center;
}
.com_page_item {
display: flex;
justify-content: flex-end;
align-items: center;
}
.commodity_card {
}
.commodity_card_list {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.commodity_card_item {
margin: 10px 0;
}
.commodity_card_item_in {
margin: 0 auto;
}
.tool_item {
}
.tool_img {
width: 16px;
height: 16px;
position: relative;
top: 2px;
left: 2px;
}
</style>
<style>
.czjl .el-input__inner {
background-color: #f7f8f9;
}
.czjl .el-date-editor.el-range-editor .el-range-input {
background-color: #f7f8f9;
width: 80px;
}
.czjl .el-date-editor.el-range-editor .el-range-separator {
width: 40px;
position: relative;
top: 2px;
}
.czjl .el-date-editor.el-range-editor {
width: 260px;
padding: 3px 10px 3px 15px;
}
.czjl .el-date-editor .el-range__icon {
margin-right: 8px;
}
</style>
\ No newline at end of file
src/pages/user/questions-answers/community.vue
View file @ cb7659f4
......@@ -35,7 +35,7 @@
<list-pagination
v-if="tableData.length"
:total="total_list"
:page-sizes="[50, 10]"
:page-sizes="[50, 20, 10]"
:page-size="currentlimit"
:current-page="currentPage"
@size-change="handleSizeChange"
......@@ -92,7 +92,7 @@ export default {
table_header: [],
total_list: 0,
currentPage: 1,
currentlimit: 50,
currentlimit: 10,
form_data: [
{
label: "问题搜索",
......
src/pages/user/questions-answers/my-qa.vue
View file @ cb7659f4
......@@ -25,33 +25,33 @@
<p class="card_name">我的提问</p>
<p>
{{ helper.numberFormat(user_info.question_num)
}}<span v-if="user_info.question_num > 10000" class="card_wan"
>万</span
>
}}<span v-if="user_info.question_num > 10000" class="card_wan">
万
</span>
</p>
</div>
</div>
<div class="user_qa_card my_a">
<img src="@/assets/imgs/ic_wodehuida.png" />
<div class="card_word">
<p class="card_name">我的提问</p>
<p class="card_name">我的回答</p>
<p>
{{ helper.numberFormat(user_info.answer_num)
}}<span v-if="user_info.answer_num > 10000" class="card_wan"
>万</span
>
}}<span v-if="user_info.answer_num > 10000" class="card_wan">
万
</span>
</p>
</div>
</div>
<div class="user_qa_card my_view">
<img src="@/assets/imgs/ic_liulanshu.png" />
<div class="card_word">
<p class="card_name">我的提问</p>
<p class="card_name">浏览数</p>
<p>
{{ helper.numberFormat(user_info.view_num)
}}<span v-if="user_info.view_num > 10000" class="card_wan"
>万</span
>
}}<span v-if="user_info.view_num > 10000" class="card_wan">
万
</span>
</p>
</div>
</div>
......@@ -77,11 +77,9 @@
{{ item.content.replace(/<[^<>]+>/g, "") }}
</p>
<p v-if="activeName == 2" class="cell_other">
<span
>删除时间：{{
helper.dateStringTransform(item.deleted_time)
}}</span
>
<span>
删除时间：{{ helper.dateStringTransform(item.deleted_time) }}
</span>
<span>删除人：{{ item.delete_user }}</span>
<span>删除理由：{{ item.reason }}</span>
</p>
......
src/pages/workbench/fwzc_fwcs.vue
View file @ cb7659f4
<template>
<div class="fwcs">
<el-breadcrumb v-if="is_map != 0" separator="/" class="bread_crumb">
<el-breadcrumb-item :to="{ path: '/workplace' }"
>在线组件工具</el-breadcrumb-item
>
<el-breadcrumb-item :to="{ path: '/intelligent_drawing' }"
>智能制图</el-breadcrumb-item
>
<el-breadcrumb-item :to="{ path: '/workplace' }">
在线组件工具
</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/intelligent_drawing' }">
智能制图
</el-breadcrumb-item>
<el-breadcrumb-item>发布信息填写</el-breadcrumb-item>
</el-breadcrumb>
<el-breadcrumb
......@@ -14,12 +14,12 @@
separator="/"
class="bread_crumb"
>
<el-breadcrumb-item :to="{ path: '/workplace' }"
>在线组件工具</el-breadcrumb-item
>
<el-breadcrumb-item :to="{ path: '/progress/designer' }"
>流程设计</el-breadcrumb-item
>
<el-breadcrumb-item :to="{ path: '/workplace' }">
在线组件工具
</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/progress/designer' }">
流程设计
</el-breadcrumb-item>
<el-breadcrumb-item>发布信息填写</el-breadcrumb-item>
</el-breadcrumb>
<el-breadcrumb v-else separator="/" class="bread_crumb">
......@@ -80,7 +80,7 @@
（用于查询流程状态）
</p>
</div>
<div v-if="(activeBtn == 4 && zhyyVal == 24) || activeBtn == 3">
<div v-show="(activeBtn == 4 && zhyyVal == 24) || activeBtn == 3">
<div class="fwcs_fwdz">
上传接口文档
<span class="title_bc">（请上传所有服务地址完整接口文档）</span>：
......@@ -96,13 +96,14 @@
class="lc_upf"
up_fz="支持.pdf，.docx，.doc，.zip，.rar 格式文件"
accepts=".pdf, .docx, .doc, .zip, .rar"
:list="jkwds"
></upload-file>
</div>
<div v-if="activeBtn == 3">
<div class="fwcs_fwdz">返回数据格式</div>
<el-radio-group v-model="gz_fhsjgs" class="gz_fhsjgs_rad">
<el-radio label="JSON">JSON</el-radio>
<el-radio label="XML">XML</el-radio>
<el-radio label="xml">XML</el-radio>
</el-radio-group>
</div>
<div v-if="!(activeBtn == 4 && zhyyVal == 24)" class="fwcs_fwdz">
......@@ -142,9 +143,9 @@
></el-option>
</el-select>
</el-input>
<el-button @click="clickFwcs()" class="fwcs_btn_fwcs"
>服务测试</el-button
>
<el-button @click="clickFwcs()" class="fwcs_btn_fwcs">
服务测试
</el-button>
</div>
<div v-if="activeBtn == 0 || activeBtn == 3">
<el-tabs v-model="activeName" class="fwcs_tabs" @tab-click="clickTab">
......@@ -177,7 +178,10 @@
<el-radio label="JSON">JSON</el-radio>
</el-radio-group>
</div>
<v-apaas-code ref="jsonCodes"></v-apaas-code>
<v-apaas-code
:key="'code' + code_1_index"
ref="jsonCodes"
></v-apaas-code>
</el-tab-pane>
<el-tab-pane label="授权信息" name="2">
<el-row class="sqxx_row">
......@@ -258,7 +262,10 @@
</el-radio-group>
</div>
<div v-show="zhfwQqt == 'JSON'">
<v-apaas-code ref="zhfwJsonCodes"></v-apaas-code>
<v-apaas-code
:key="'code' + code_2_index"
ref="zhfwJsonCodes"
></v-apaas-code>
</div>
<div v-show="zhfwQqt == 'form-data'">
<ces-table
......@@ -500,7 +507,10 @@
<el-radio label="JSON">JSON</el-radio>
</el-radio-group>
</div>
<v-apaas-code :ref="`one_json_${indexOne}`"></v-apaas-code>
<v-apaas-code
:key="'code' + indexOne"
:ref="`one_json_${indexOne}`"
></v-apaas-code>
</el-tab-pane>
<el-tab-pane label="授权信息" name="2">
<el-row class="sqxx_row">
......@@ -979,6 +989,8 @@ export default {
dataType: "",
jkwds: [],
gz_fhsjgs: "JSON",
code_1_index: 0,
code_2_index: 0,
};
},
computed: {},
......@@ -999,6 +1011,40 @@ export default {
this.select = "GET";
this.serviceUrl = "";
this.noSearchUrl = "";
this.gz_fhsjgs = "JSON";
this.zhyyVal = 22;
this.datasSj = [];
this.tokenVal = "";
this.datasZh = [];
this.zhfwQqt = "JSON";
this.datasZhForm = [];
this.datasZhwww = [];
this.liucheng_list = [
{
one_input: "",
select: "GET",
serviceUrl: "",
datasSj: [],
sjfwQqt: "JSON",
sqfsVal: "",
tokenVal: "",
noSearchUrl: "",
resultShow: false,
resSuccess: false,
requestRules: 0,
responseRules: 0,
request_fields: [],
response_fields: [],
checkPass: false,
dataType: "",
body_fields: [],
param_fields: [],
},
];
this.activeName = "0";
this.code_1_index += 1;
this.code_2_index += 1;
this.jkwds = [];
},
getUrl(enUrl) {
let url = decodeURI(enUrl);
......@@ -1019,7 +1065,7 @@ export default {
this.noSearchUrl = enUrl;
}
this.serviceUrl = url;
if (this.activeBtn == 0) {
if (this.activeBtn == 0 || this.activeBtn == 3) {
this.datasSj = arr;
} else if (this.activeBtn == 4) {
this.datasZh = arr;
......@@ -1153,21 +1199,30 @@ export default {
this.activeBtn == 3 ||
(this.activeBtn == 4 && (this.zhyyVal == 22 || this.zhyyVal == 23))
) {
let requestData = this.$refs.fwcs_sjfw_qqcs.getTableData();
let responseData = this.$refs.fwcs_sjfw_fhcs.getTableData();
this.requestRules = 0;
this.responseRules = 0;
this.checkTable(requestData, 0);
this.checkTable(responseData, 1);
if (this.requestRules == 0 && this.responseRules == 0) {
this.request_fields = requestData;
this.response_fields = responseData;
this.jcxxtx = true;
this.getOrganization();
} else if (this.requestRules != 0) {
this.$message.error("请完善请求参数信息中的字段名称");
} else if (this.responseRules != 0) {
this.$message.error("请完善返回参数信息中的字段名称");
if (
this.activeBtn == 3 ||
(this.activeBtn == 4 && this.zhyyVal == 22)
) {
if (this.jkwds.length == 0) {
this.$message.error("请上传接口文档");
} else {
let requestData = this.$refs.fwcs_sjfw_qqcs.getTableData();
let responseData = this.$refs.fwcs_sjfw_fhcs.getTableData();
this.requestRules = 0;
this.responseRules = 0;
this.checkTable(requestData, 0);
this.checkTable(responseData, 1);
if (this.requestRules == 0 && this.responseRules == 0) {
this.request_fields = requestData;
this.response_fields = responseData;
this.jcxxtx = true;
this.getOrganization();
} else if (this.requestRules != 0) {
this.$message.error("请完善请求参数信息中的字段名称");
} else if (this.responseRules != 0) {
this.$message.error("请完善返回参数信息中的字段名称");
}
}
}
} else if (this.activeBtn == 1) {
let value = helper.getQueryString("id", this.serviceUrl);
......@@ -1334,77 +1389,79 @@ export default {
}
},
registePt() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.cover.length != 0) {
let contentType = "";
if (this.activeBtn == 1 && !this.is_portal) {
this.addPortalItem();
} else {
if (this.activeBtn == 0 || this.activeBtn == 3) {
contentType = this.sjfwQqt;
} else if (this.activeBtn == 4) {
if (this.activeZh == 1) {
contentType = this.zhfwQqt;
}
}
let query = {
name: this.form.name,
sectors: this.form.area,
organization: this.form.origin,
cover: this.cover[0],
openness: this.form.resource,
descript: this.form.desc,
data_service_type1: this.btnList[this.activeBtn].id,
data_service_type2:
this.activeBtn == 0
? 12
: this.activeBtn == 1
? this.skfwQqt
: this.activeBtn == 4
? this.zhyyVal
: 0,
portal_id: this.portal_id,
encode_method: this.form.code,
urls: [
{
name: "",
response_type:
this.activeBtn == 3 ? this.gz_fhsjgs : "JSON",
req_auth_mthod: 0,
req_auth_token: this.tokenVal,
method: this.select,
url: this.serviceUrl,
request_fields:
this.dataType == "body"
? this.request_fields
: this.body_fields,
request_query_fields:
this.dataType == "param"
? this.request_fields
: this.param_fields,
response_fields: this.response_fields,
content_type: contentType,
},
],
};
this.$api.workbench.serviceAdd(query).then((response) => {
if (response.data.success == 1) {
this.$message.success("服务注册成功");
this.$router.push("/fwgl/" + this.$store.getters.level);
} else {
console.log(response.data.errMsg);
this.$message.error(response.data.errMsg);
}
});
}
} else {
this.$message.error("请上传服务封面");
}
} else {
this.$message.error("请完善服务基本信息");
}
});
console.log(this.jkwds);
// this.$refs.form.validate((valid) => {
// if (valid) {
// if (this.cover.length != 0) {
// let contentType = "";
// if (this.activeBtn == 1 && !this.is_portal) {
// this.addPortalItem();
// } else {
// if (this.activeBtn == 0 || this.activeBtn == 3) {
// contentType = this.sjfwQqt;
// } else if (this.activeBtn == 4) {
// if (this.activeZh == 1) {
// contentType = this.zhfwQqt;
// }
// }
// let query = {
// name: this.form.name,
// sectors: this.form.area,
// organization: this.form.origin,
// cover: this.cover[0],
// openness: this.form.resource,
// descript: this.form.desc,
// data_service_type1: this.btnList[this.activeBtn].id,
// data_service_type2:
// this.activeBtn == 0
// ? 12
// : this.activeBtn == 1
// ? this.skfwQqt
// : this.activeBtn == 4
// ? this.zhyyVal
// : 0,
// portal_id: this.portal_id,
// encode_method: this.form.code,
// doc_file: this.jkwds.length != 0 ? this.jkwds[0] : "",
// urls: [
// {
// name: "",
// response_type:
// this.activeBtn == 3 ? this.gz_fhsjgs : "JSON",
// req_auth_mthod: 0,
// req_auth_token: this.tokenVal,
// method: this.select,
// url: this.serviceUrl,
// request_fields:
// this.dataType == "body"
// ? this.request_fields
// : this.body_fields,
// request_query_fields:
// this.dataType == "param"
// ? this.request_fields
// : this.param_fields,
// response_fields: this.response_fields,
// content_type: contentType,
// },
// ],
// };
// this.$api.workbench.serviceAdd(query).then((response) => {
// if (response.data.success == 1) {
// this.$message.success("服务注册成功");
// this.$router.push("/fwgl/" + this.$store.getters.level);
// } else {
// console.log(response.data.errMsg);
// this.$message.error(response.data.errMsg);
// }
// });
// }
// } else {
// this.$message.error("请上传服务封面");
// }
// } else {
// this.$message.error("请完善服务基本信息");
// }
// });
},
registeOne() {
this.$refs.form.validate((valid) => {
......@@ -1493,6 +1550,9 @@ export default {
}
},
changeZhType(val) {
this.serviceUrl = "";
this.select = "GET";
this.activeZh = "0";
this.resultShow = false;
this.resSuccess = false;
},
......@@ -1593,14 +1653,20 @@ export default {
// id: self.portal_id,
// });
// this.$router.push("/intelligent_drawing");
if(self.is_map == 1){
let shareWebMapParam =JSON.parse(window.sessionStorage.getItem('shareWebMapParam'))
window.location.href = '/vmap/#/map'+`?id=${shareWebMapParam.portalid}`
}else if(self.is_map == 4){
if (self.is_map == 1) {
let shareWebMapParam = JSON.parse(
window.sessionStorage.getItem("shareWebMapParam")
);
window.location.href =
"/vmap/#/map" + `?id=${shareWebMapParam.portalid}`;
} else if (self.is_map == 4) {
self.$router.back(-1);
}else{
let shareWebMapParam =JSON.parse(window.sessionStorage.getItem('shareWebMapParam'))
window.location.href = '/vmap/#/map'+`?id=${shareWebMapParam.portalid}`
} else {
let shareWebMapParam = JSON.parse(
window.sessionStorage.getItem("shareWebMapParam")
);
window.location.href =
"/vmap/#/map" + `?id=${shareWebMapParam.portalid}`;
}
} else if (type == "process") {
this.$router.push("/progress/designer");
......@@ -1794,7 +1860,6 @@ export default {
let headers = {};
let requestData = {};
let dataOne = this.liucheng_list[indexOne];
console.log(dataOne);
if (dataOne.sqfsVal != "") {
headers.Authorization = [];
headers.Authorization[0] = dataOne.sqfsVal + " " + dataOne.tokenVal;
......@@ -1823,12 +1888,8 @@ export default {
}
let bodys = "";
let contentType = "";
if (this.activeBtn == 0) {
bodys = this.$refs["one_json_" + indexOne][0]
? this.$refs["one_json_" + indexOne][0].getCodesVal()
: "";
contentType = dataOne.sjfwQqt;
}
bodys = this.$refs["one_json_" + indexOne][0].getCodesVal();
contentType = dataOne.sjfwQqt;
let query = {
method: dataOne.select,
url: dataOne.serviceUrl,
......
src/pages/workbench/workPlace.vue
View file @ cb7659f4
......@@ -1004,6 +1004,14 @@ export default {
color: "#58617a",
url:'/search_engine',
},
{
text: "数据采集",
pic: require("@/assets/imgs/home_tool_ic_sscj.png"),
bg: "#fff2e2",
color: "#ea7d19",
url:'https://apaas3.wodcloud.com/sjcj/ui/',
target: 1,
},
],
service_arr: [
["服务列表", "申请服务", "云资源"],
......
src/request/api/user.js
View file @ cb7659f4
......@@ -67,6 +67,14 @@ const user = {
},
getUserQA() {
return axios.get(`/apaas/support/qa/info`)
},
// my coins
getUserCoins() {
return axios.get(``)
},
getCoinList() {
return axios.get(``)
}
}
......
src/router/index.js
View file @ cb7659f4
......@@ -167,7 +167,8 @@ export default new Router({
path: "/technical_support/doc_manage",
name: "technicalSupportDoc",
redirect: "/technical_support/doc_manage/list",
component: () => import("@/pages/technical-support/doc-manage/index"),
component: () =>
import("@/pages/technical-support/doc-manage/index"),
children: [
{
path: "/technical_support/doc_manage/list",
......@@ -183,11 +184,26 @@ export default new Router({
}, // 开发文档管理编辑
],
}, // 开发文档管理
{
path: "/technical_support/demo_center",
name: "technicalSupportDemo",
// redirect: "/technical_support/demo_center/index",
component: () => import("@/pages/technical-support/demo-center/index"),
// children: [
// {
// path: "/technical_support/doc_manage/list",
// name: "technicalSupportDocDetail",
// component: () =>
// import("@/pages/technical-support/doc-manage/list"),
// }, // 示例中心管理列表
// ],
}, // 示例中心
{
path: "/technical_support/answer_center/",
name: "technicalSupportDoc",
redirect: "/technical_support/answer_center/list",
component: () => import("@/pages/technical-support/answer-center/index"),
component: () =>
import("@/pages/technical-support/answer-center/index"),
children: [
{
path: "/technical_support/answer_center/list",
......@@ -206,6 +222,18 @@ export default new Router({
}, // 问答中心详情
],
}, // 问答中心
{
path: "/technical_support/sdk",
name: "technicalSupportSdk",
component: () => import("@/pages/technical-support/sdk/index"),
children: [
{
path: "/technical_support/sdk/:type/:id",
name: "technicalSupportSdkDetail",
component: () => import("@/pages/technical-support/sdk/detail"),
}, // 问答中心列表
],
}, // 问答中心
],
}, // 技术支持
{
......@@ -423,6 +451,11 @@ export default new Router({
name: "myQA",
component: () => import("@/pages/user/questions-answers/my-qa"),
},
{
path: "/user/my_coin", // 我的金币
name: "myCoin",
component: () => import("@/pages/user/my-coin"),
},
],
}, // 个人中心
{
......@@ -434,14 +467,16 @@ export default new Router({
{
path: "/qa/questions", // 提问列表
name: "questions",
component: () => import("@/pages/user/questions-answers/community"),
component: () =>
import("@/pages/user/questions-answers/community"),
},
{
path: "/qa/answers", // 回答列表
name: "answers",
component: () => import("@/pages/user/questions-answers/community"),
component: () =>
import("@/pages/user/questions-answers/community"),
},
]
],
},
{
path: "/authority", // 权限管理
......
static/view/data/arcgisTreeNode.json 0 → 100644
View file @ cb7659f4
{
"data": [
{
"label": "arcgis server 地图示例",
"children": [
{
"label": "二维地图",
"name": "2d_base_map",
"branch": "arcgis_latest"
},
{
"label": "三维地图",
"name": "3d_base_map",
"branch": "arcgis_latest"
},
{
"label": "二维地图与三维地图切换",
"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",
"branch": "arcgis_latest"
},
{
"label": "要素图层显示要素列表",
"name": "featurelayer",
"branch": "arcgis_latest"
},
{
"label": "地理编码检索",
"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",
"branch": "arcgis_latest"
},
{
"label": "Geoserver_WMTS服务",
"name": "arcgis_load_geoserver_wmts",
"branch": "arcgis_latest"
},
{
"label": "单图层查询",
"name": "simplesearch",
"branch": "arcgis_latest"
},
{
"label": "多图层拉框查询",
"name": "multilayer3search",
"branch": "arcgis_latest"
},
{
"label": "多图层属性查询",
"name": "multilayer4search",
"branch": "arcgis_latest"
},
{
"label": "通用多图层多字段查询",
"name": "multilayersandfeilds_3search",
"branch": "arcgis_latest"
},
{
"label": "视频Webmap",
"name": "video_web_map",
"branch": "arcgis_latest"
},
{
"label": "图表Webmap",
"name": "echarts_web_map",
"branch": "arcgis_latest"
},
{
"label": "Webmap test",
"name": "webmap_test",
"branch": "arcgis_latest"
},
{
"label": "热力图",
"name": "heatmap",
"branch": "arcgis_latest"
},
{
"label": "图层管理",
"name": "manage_layers",
"branch": "arcgis_latest"
},
{
"label": "迁徙图",
"name": "migrate",
"branch": "arcgis_latest"
},
{
"label": "迁徙图2",
"name": "migrate2",
"branch": "arcgis_latest"
},
{
"label": "公交线路图",
"name": "bus_line",
"branch": "arcgis_latest"
},
{
"label": "点聚合图",
"name": "flareClusterLayer",
"branch": "arcgis_latest"
},
{
"label": "运动图层",
"name": "movinglayer",
"branch": "arcgis_latest"
},
{
"label": "3.x运动图层",
"name": "3.xmovelayer",
"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"
}
]
}
]
}
\ No newline at end of file
static/view/demo/data.json 0 → 100644
View file @ cb7659f4
This source diff could not be displayed because it is too large. You can view the blob instead.
static/view/demo/page-2d_base_heatMapWithEchart.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用echart渲染热力图</title>
<style>
html,
body,
#view {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
<script>
var dojoConfig = {
parseOnLoad: true,
packages: [{
name: "src",
location: location.pathname.replace(/\/[^/]+$/, "") + "/src"
}]
};
</script>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/echart/echarts.min.js"></script>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/echart/echartsExtent.js"></script>
<script>
require([
"esri/Map",
"https://apaas.wodcloud.com/mapsamples/static/js/GaodeLayer.js",
"esri/views/SceneView",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/Point",
"esri/geometry/SpatialReference",
"esri/symbols/PictureMarkerSymbol",
"dojo/domReady!"
], function (Map, GaodeLayer, SceneView, MapView, Graphic, GraphicsLayer, Point, SpatialReference, PictureMarkerSymbol) {
//新建矢量图层
var GaodeLayer = new GaodeLayer();
//json格式的地理数据
var map = new Map({
layers: [GaodeLayer]
});
var view = new MapView({
container: "view",
map: map,
center: [106.71543991100576, 26.58363100116717],
zoom: 10
});
});
</script>
</head>
<body>
<div id="view"></div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-2d_base_heatMapWithEchart_3.x.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在ArcGis地图中绘制Echarts热力图</title>
<!--
作者：tsq
时间：2018-08-30
描述：在ArcGis地图中绘制Echarts热力图 Demo
-->
<style type="text/css">
html,
body,
#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- <link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css" /> -->
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
<script type="text/javascript" src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<!-- <script type="text/javascript" src="https://apaas.wodcloud.com/mapsamples/static/js/echart/Echarts3Layer.js"></script> -->
<!-- <script type="text/javascript" src="js/echarts.min.js"></script> -->
<!--
作者：tsq
时间：2018-08-29
描述：echartsExtent.js要在arcgis api前面引用，否则会报错
-->
<!-- <script type="text/javascript" src="js/echartsExtent.js"></script> -->
<script src="https://apaas.wodcloud.com/mapsamples/static/js/echart/echarts.min.js"></script>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/echart/echartsExtent.js"></script>
<script type="text/javascript">
/*
* 这个配置必须写在加载arcgis api之前，否则不能生效
* location是一个绝对路径，第一个斜杠前面会默认添加一级域名，所以后面要填上二级域名等等,
* 比如：http://localhost:8065/index.html，这种只需要写"/js"即可；
* 而http://localhost:8065/EchartsHeatmapInArcgis/index.html这种就需要写"/../js"或者"/EchartsHeatmapInArcgis/js"
*/
var dojoConfig = {
parseOnLoad: true,
packages: [{
"name": "src",
"location": location.pathname.replace(/\/[^/]+$/, '') + "/js"
}]
};
</script>
<!-- <script src="https://js.arcgis.com/3.19/"></script> -->
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// https://apaas.wodcloud.com/mapsamples/static/js/echart/Echarts3Layer.js
require(["esri/Map","../../../static/js/echart/Echarts3Layer.js"],function(Map,echartsLayer){
var map
var geoCoordMap = {
"海门": [121.15, 31.89],
"鄂尔多斯": [109.781327, 39.608266],
"招远": [120.38, 37.35],
"舟山": [122.207216, 29.985295],
"齐齐哈尔": [123.97, 47.33],
"盐城": [120.13, 33.38],
"赤峰": [118.87, 42.28],
"青岛": [120.33, 36.07],
"乳山": [121.52, 36.89],
"金昌": [102.188043, 38.520089],
"泉州": [118.58, 24.93],
"莱西": [120.53, 36.86],
"日照": [119.46, 35.42],
"胶南": [119.97, 35.88],
"南通": [121.05, 32.08],
"拉萨": [91.11, 29.97],
"云浮": [112.02, 22.93],
"梅州": [116.1, 24.55],
"文登": [122.05, 37.2],
"上海": [121.48, 31.22],
"攀枝花": [101.718637, 26.582347],
"威海": [122.1, 37.5],
"承德": [117.93, 40.97],
"厦门": [118.1, 24.46],
"汕尾": [115.375279, 22.786211],
"潮州": [116.63, 23.68],
"丹东": [124.37, 40.13],
"太仓": [121.1, 31.45],
"曲靖": [103.79, 25.51],
"烟台": [121.39, 37.52],
"福州": [119.3, 26.08],
"瓦房店": [121.979603, 39.627114],
"即墨": [120.45, 36.38],
"抚顺": [123.97, 41.97],
"玉溪": [102.52, 24.35],
"张家口": [114.87, 40.82],
"阳泉": [113.57, 37.85],
"莱州": [119.942327, 37.177017],
"湖州": [120.1, 30.86],
"汕头": [116.69, 23.39],
"昆山": [120.95, 31.39],
"宁波": [121.56, 29.86],
"湛江": [110.359377, 21.270708],
"揭阳": [116.35, 23.55],
"荣成": [122.41, 37.16],
"连云港": [119.16, 34.59],
"葫芦岛": [120.836932, 40.711052],
"常熟": [120.74, 31.64],
"东莞": [113.75, 23.04],
"河源": [114.68, 23.73],
"淮安": [119.15, 33.5],
"泰州": [119.9, 32.49],
"南宁": [108.33, 22.84],
"营口": [122.18, 40.65],
"惠州": [114.4, 23.09],
"江阴": [120.26, 31.91],
"蓬莱": [120.75, 37.8],
"韶关": [113.62, 24.84],
"嘉峪关": [98.289152, 39.77313],
"广州": [113.23, 23.16],
"延安": [109.47, 36.6],
"太原": [112.53, 37.87],
"清远": [113.01, 23.7],
"中山": [113.38, 22.52],
"昆明": [102.73, 25.04],
"寿光": [118.73, 36.86],
"盘锦": [122.070714, 41.119997],
"长治": [113.08, 36.18],
"深圳": [114.07, 22.62],
"珠海": [113.52, 22.3],
"宿迁": [118.3, 33.96],
"咸阳": [108.72, 34.36],
"铜川": [109.11, 35.09],
"平度": [119.97, 36.77],
"佛山": [113.11, 23.05],
"海口": [110.35, 20.02],
"江门": [113.06, 22.61],
"章丘": [117.53, 36.72],
"肇庆": [112.44, 23.05],
"大连": [121.62, 38.92],
"临汾": [111.5, 36.08],
"吴江": [120.63, 31.16],
"石嘴山": [106.39, 39.04],
"沈阳": [123.38, 41.8],
"苏州": [120.62, 31.32],
"茂名": [110.88, 21.68],
"嘉兴": [120.76, 30.77],
"长春": [125.35, 43.88],
"胶州": [120.03336, 36.264622],
"银川": [106.27, 38.47],
"张家港": [120.555821, 31.875428],
"三门峡": [111.19, 34.76],
"锦州": [121.15, 41.13],
"南昌": [115.89, 28.68],
"柳州": [109.4, 24.33],
"三亚": [109.511909, 18.252847],
"自贡": [104.778442, 29.33903],
"吉林": [126.57, 43.87],
"阳江": [111.95, 21.85],
"泸州": [105.39, 28.91],
"西宁": [101.74, 36.56],
"宜宾": [104.56, 29.77],
"呼和浩特": [111.65, 40.82],
"成都": [104.06, 30.67],
"大同": [113.3, 40.12],
"镇江": [119.44, 32.2],
"桂林": [110.28, 25.29],
"张家界": [110.479191, 29.117096],
"宜兴": [119.82, 31.36],
"北海": [109.12, 21.49],
"西安": [108.95, 34.27],
"金坛": [119.56, 31.74],
"东营": [118.49, 37.46],
"牡丹江": [129.58, 44.6],
"遵义": [106.9, 27.7],
"绍兴": [120.58, 30.01],
"扬州": [119.42, 32.39],
"常州": [119.95, 31.79],
"潍坊": [119.1, 36.62],
"重庆": [106.54, 29.59],
"台州": [121.420757, 28.656386],
"南京": [118.78, 32.04],
"滨州": [118.03, 37.36],
"贵阳": [106.71, 26.57],
"无锡": [120.29, 31.59],
"本溪": [123.73, 41.3],
"克拉玛依": [84.77, 45.59],
"渭南": [109.5, 34.52],
"马鞍山": [118.48, 31.56],
"宝鸡": [107.15, 34.38],
"焦作": [113.21, 35.24],
"句容": [119.16, 31.95],
"北京": [116.46, 39.92],
"徐州": [117.2, 34.26],
"衡水": [115.72, 37.72],
"包头": [110, 40.58],
"绵阳": [104.73, 31.48],
"乌鲁木齐": [87.68, 43.77],
"枣庄": [117.57, 34.86],
"杭州": [120.19, 30.26],
"淄博": [118.05, 36.78],
"鞍山": [122.85, 41.12],
"溧阳": [119.48, 31.43],
"库尔勒": [86.06, 41.68],
"安阳": [114.35, 36.1],
"开封": [114.35, 34.79],
"济南": [117, 36.65],
"德阳": [104.37, 31.13],
"温州": [120.65, 28.01],
"九江": [115.97, 29.71],
"邯郸": [114.47, 36.6],
"临安": [119.72, 30.23],
"兰州": [103.73, 36.03],
"沧州": [116.83, 38.33],
"临沂": [118.35, 35.05],
"南充": [106.110698, 30.837793],
"天津": [117.2, 39.13],
"富阳": [119.95, 30.07],
"泰安": [117.13, 36.18],
"诸暨": [120.23, 29.71],
"郑州": [113.65, 34.76],
"哈尔滨": [126.63, 45.75],
"聊城": [115.97, 36.45],
"芜湖": [118.38, 31.33],
"唐山": [118.02, 39.63],
"平顶山": [113.29, 33.75],
"邢台": [114.48, 37.05],
"德州": [116.29, 37.45],
"济宁": [116.59, 35.38],
"荆州": [112.239741, 30.335165],
"宜昌": [111.3, 30.7],
"义乌": [120.06, 29.32],
"丽水": [119.92, 28.45],
"洛阳": [112.44, 34.7],
"秦皇岛": [119.57, 39.95],
"株洲": [113.16, 27.83],
"石家庄": [114.48, 38.03],
"莱芜": [117.67, 36.19],
"常德": [111.69, 29.05],
"保定": [115.48, 38.85],
"湘潭": [112.91, 27.87],
"金华": [119.64, 29.12],
"岳阳": [113.09, 29.37],
"长沙": [113, 28.21],
"衢州": [118.88, 28.97],
"廊坊": [116.7, 39.53],
"菏泽": [115.480656, 35.23375],
"合肥": [117.27, 31.86],
"武汉": [114.31, 30.52],
"大庆": [125.03, 46.58]
};
var geoValue = [{
name: "海门",
value: 9
},
{
name: "鄂尔多斯",
value: 12
},
{
name: "招远",
value: 12
},
{
name: "舟山",
value: 12
},
{
name: "齐齐哈尔",
value: 14
},
{
name: "盐城",
value: 15
},
{
name: "赤峰",
value: 16
},
{
name: "青岛",
value: 18
},
{
name: "乳山",
value: 18
},
{
name: "金昌",
value: 19
},
{
name: "泉州",
value: 21
},
{
name: "莱西",
value: 21
},
{
name: "日照",
value: 21
},
{
name: "胶南",
value: 22
},
{
name: "南通",
value: 23
},
{
name: "拉萨",
value: 24
},
{
name: "云浮",
value: 24
},
{
name: "梅州",
value: 25
},
{
name: "文登",
value: 25
},
{
name: "上海",
value: 25
},
{
name: "攀枝花",
value: 25
},
{
name: "威海",
value: 25
},
{
name: "承德",
value: 25
},
{
name: "厦门",
value: 26
},
{
name: "汕尾",
value: 26
},
{
name: "潮州",
value: 26
},
{
name: "丹东",
value: 27
},
{
name: "太仓",
value: 27
},
{
name: "曲靖",
value: 27
},
{
name: "烟台",
value: 28
},
{
name: "福州",
value: 29
},
{
name: "瓦房店",
value: 30
},
{
name: "即墨",
value: 30
},
{
name: "抚顺",
value: 31
},
{
name: "玉溪",
value: 31
},
{
name: "张家口",
value: 31
},
{
name: "阳泉",
value: 31
},
{
name: "莱州",
value: 32
},
{
name: "湖州",
value: 32
},
{
name: "汕头",
value: 32
},
{
name: "昆山",
value: 33
},
{
name: "宁波",
value: 33
},
{
name: "湛江",
value: 33
},
{
name: "揭阳",
value: 34
},
{
name: "荣成",
value: 34
},
{
name: "连云港",
value: 35
},
{
name: "葫芦岛",
value: 35
},
{
name: "常熟",
value: 36
},
{
name: "东莞",
value: 36
},
{
name: "河源",
value: 36
},
{
name: "淮安",
value: 36
},
{
name: "泰州",
value: 36
},
{
name: "南宁",
value: 37
},
{
name: "营口",
value: 37
},
{
name: "惠州",
value: 37
},
{
name: "江阴",
value: 37
},
{
name: "蓬莱",
value: 37
},
{
name: "韶关",
value: 38
},
{
name: "嘉峪关",
value: 38
},
{
name: "广州",
value: 38
},
{
name: "延安",
value: 38
},
{
name: "太原",
value: 39
},
{
name: "清远",
value: 39
},
{
name: "中山",
value: 39
},
{
name: "昆明",
value: 39
},
{
name: "寿光",
value: 40
},
{
name: "盘锦",
value: 40
},
{
name: "长治",
value: 41
},
{
name: "深圳",
value: 41
},
{
name: "珠海",
value: 42
},
{
name: "宿迁",
value: 43
},
{
name: "咸阳",
value: 43
},
{
name: "铜川",
value: 44
},
{
name: "平度",
value: 44
},
{
name: "佛山",
value: 44
},
{
name: "海口",
value: 44
},
{
name: "江门",
value: 45
},
{
name: "章丘",
value: 45
},
{
name: "肇庆",
value: 46
},
{
name: "大连",
value: 47
},
{
name: "临汾",
value: 47
},
{
name: "吴江",
value: 47
},
{
name: "石嘴山",
value: 49
},
{
name: "沈阳",
value: 50
},
{
name: "苏州",
value: 50
},
{
name: "茂名",
value: 50
},
{
name: "嘉兴",
value: 51
},
{
name: "长春",
value: 51
},
{
name: "胶州",
value: 52
},
{
name: "银川",
value: 52
},
{
name: "张家港",
value: 52
},
{
name: "三门峡",
value: 53
},
{
name: "锦州",
value: 54
},
{
name: "南昌",
value: 54
},
{
name: "柳州",
value: 54
},
{
name: "三亚",
value: 54
},
{
name: "自贡",
value: 56
},
{
name: "吉林",
value: 56
},
{
name: "阳江",
value: 57
},
{
name: "泸州",
value: 57
},
{
name: "西宁",
value: 57
},
{
name: "宜宾",
value: 58
},
{
name: "呼和浩特",
value: 58
},
{
name: "成都",
value: 58
},
{
name: "大同",
value: 58
},
{
name: "镇江",
value: 59
},
{
name: "桂林",
value: 59
},
{
name: "张家界",
value: 59
},
{
name: "宜兴",
value: 59
},
{
name: "北海",
value: 60
},
{
name: "西安",
value: 61
},
{
name: "金坛",
value: 62
},
{
name: "东营",
value: 62
},
{
name: "牡丹江",
value: 63
},
{
name: "遵义",
value: 63
},
{
name: "绍兴",
value: 63
},
{
name: "扬州",
value: 64
},
{
name: "常州",
value: 64
},
{
name: "潍坊",
value: 65
},
{
name: "重庆",
value: 66
},
{
name: "台州",
value: 67
},
{
name: "南京",
value: 67
},
{
name: "滨州",
value: 70
},
{
name: "贵阳",
value: 71
},
{
name: "无锡",
value: 71
},
{
name: "本溪",
value: 71
},
{
name: "克拉玛依",
value: 72
},
{
name: "渭南",
value: 72
},
{
name: "马鞍山",
value: 72
},
{
name: "宝鸡",
value: 72
},
{
name: "焦作",
value: 75
},
{
name: "句容",
value: 75
},
{
name: "北京",
value: 79
},
{
name: "徐州",
value: 79
},
{
name: "衡水",
value: 80
},
{
name: "包头",
value: 80
},
{
name: "绵阳",
value: 80
},
{
name: "乌鲁木齐",
value: 84
},
{
name: "枣庄",
value: 84
},
{
name: "杭州",
value: 84
},
{
name: "淄博",
value: 85
},
{
name: "鞍山",
value: 86
},
{
name: "溧阳",
value: 86
},
{
name: "库尔勒",
value: 86
},
{
name: "安阳",
value: 90
},
{
name: "开封",
value: 90
},
{
name: "济南",
value: 92
},
{
name: "德阳",
value: 93
},
{
name: "温州",
value: 95
},
{
name: "九江",
value: 96
},
{
name: "邯郸",
value: 98
},
{
name: "临安",
value: 99
},
{
name: "兰州",
value: 99
},
{
name: "沧州",
value: 100
},
{
name: "临沂",
value: 103
},
{
name: "南充",
value: 104
},
{
name: "天津",
value: 105
},
{
name: "富阳",
value: 106
},
{
name: "泰安",
value: 112
},
{
name: "诸暨",
value: 112
},
{
name: "郑州",
value: 113
},
{
name: "哈尔滨",
value: 114
},
{
name: "聊城",
value: 116
},
{
name: "芜湖",
value: 117
},
{
name: "唐山",
value: 119
},
{
name: "平顶山",
value: 119
},
{
name: "邢台",
value: 119
},
{
name: "德州",
value: 120
},
{
name: "济宁",
value: 120
},
{
name: "荆州",
value: 127
},
{
name: "宜昌",
value: 130
},
{
name: "义乌",
value: 132
},
{
name: "丽水",
value: 133
},
{
name: "洛阳",
value: 134
},
{
name: "秦皇岛",
value: 136
},
{
name: "株洲",
value: 143
},
{
name: "石家庄",
value: 147
},
{
name: "莱芜",
value: 148
},
{
name: "常德",
value: 152
},
{
name: "保定",
value: 153
},
{
name: "湘潭",
value: 154
},
{
name: "金华",
value: 157
},
{
name: "岳阳",
value: 169
},
{
name: "长沙",
value: 175
},
{
name: "衢州",
value: 177
},
{
name: "廊坊",
value: 193
},
{
name: "菏泽",
value: 194
},
{
name: "合肥",
value: 229
},
{
name: "武汉",
value: 273
},
{
name: "大庆",
value: 279
}
];
var convertData = function(data) {
var res = [];
for(var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if(geoCoord) {
res.push(geoCoord.concat(data[i].value));
}
}
return res;
};
var option = {
title: {
text: '全国主要城市空气质量',
subtext: 'data from PM25.in',
sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
}
},
backgroundColor: 'rgba(128, 128, 128, 0)',
visualMap: {
min: 0,
max: 2,
show: false,
seriesIndex: 0,
calculable: true,
inRange: {
color: ['blue', 'blue', 'green', 'yellow', 'red']
},
textStyle: {
color: '#fff'
}
},
geo: {
map: '',
show: false,
label: {
emphasis: {
show: false
}
},
left: 0,
top: 0,
right: 0,
bottom: 0,
roam: false,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [{
type: 'heatmap', //effectScatter
coordinateSystem: 'geo',
data: convertData(geoValue),
pointSize: 10,
blurSize: 8
}]
};
dojo.ready(function() {
//创建地图
map = new Map('map', {
basemap: 'dark-gray',
center: [120.15785586158, 30.269122098642],
zoom: 5,
navigationMode: "css-transform",
force3DTransforms: true,
logo: false,
fitExtent: true,
fadeOnZoom: true,
slider: false
});
//地图加载完成后初始化Echarts图层
dojo.connect(map, 'onLoad', function(themap) {
//这里在地图上创建统计图图层，以后统计图的绘制将从这里进入
var overlay = new Echarts3Layer(map, echarts);
var chartsContainer = overlay.getEchartsContainer();
var myChart = overlay.initECharts(chartsContainer);
//window.onresize = myChart.onresize;
echartsLayer = overlay;
$(window).on("resize", function() {
resize();
});
overlay.setOption(option);
// setTimeout(function() {
// clear();
// }, 1000);
});
});
function resize() {
if(echartsLayer) {
var myEchart = echartsLayer.getECharts(), //echarts对象
$myEchartContainer = $(echartsLayer.getEchartsContainer()), //echarts统计图所在的div
myMap = echartsLayer.getMap(); //地图
var $myMapContainer = $(myMap.container); //地图所在div
var width = $myMapContainer.width(),
height = $myMapContainer.height(); //获取地图的宽高
$myEchartContainer.width(width); //设置统计图容器的宽高为地图容器的宽高
$myEchartContainer.height(height);
myEchart.resize(); //调用echarts的resize方法
}
}
function clear() {
if(echartsLayer) {
var opt = option;
opt.series = [{
type: 'heatmap',
coordinateSystem: 'geo',
data: [
[]
], //传入空数据，以达到清除原有统计图的效果
pointSize: 10,
blurSize: 8
}];
echartsLayer.setOption(opt);
}
}
function remove() {
if(echartsLayer) {
var $echartsContainer = $(echartsLayer.getEchartsContainer());
//移除图层容器以达到删除统计的效果
$echartsContainer.remove();
}
}
})
// var map, echartsLayer;
</script>
</body>
</html>
\ No newline at end of file
static/view/demo/page-2d_base_loadAmap.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高德地图</title>
<style>
html,
body,
#view {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
<script>
var dojoConfig = {
parseOnLoad: true,
packages: [{
name: "src",
location: location.pathname.replace(/\/[^/]+$/, "") + "/src"
}]
};
</script>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/Map",
"https://apaas.wodcloud.com/mapsamples/static/js/GaodeLayer.js",
"esri/views/SceneView",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/Point",
"esri/geometry/SpatialReference",
"esri/symbols/PictureMarkerSymbol",
"dojo/domReady!"
], function (Map, GaodeLayer, SceneView, MapView, Graphic, GraphicsLayer, Point, SpatialReference, PictureMarkerSymbol) {
//新建矢量图层
var GaodeLayer = new GaodeLayer();
//json格式的地理数据
var map = new Map({
layers: [GaodeLayer, footprintlayer]
});
var view = new MapView({
container: "view",
map: map,
center: [106.71543991100576, 26.58363100116717],
zoom: 10
});
});
</script>
</head>
<body>
<div id="view"></div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-2d_base_loadAmapTest.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高德地图</title>
<style>
html,
body,
#view {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
<script>
var dojoConfig = {
parseOnLoad: true,
packages: [{
name: "src",
location: location.pathname.replace(/\/[^/]+$/, "") + "/src"
}]
};
</script>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/Map",
"https://apaas.wodcloud.com/mapsamples/static/js/GaodeLayer.js",
"esri/views/SceneView",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/Point",
"esri/geometry/SpatialReference",
"esri/symbols/PictureMarkerSymbol",
"esri/layers/BaseTileLayer", "esri/request",
"dojo/domReady!"
], function (Map, GaodeLayer, SceneView, MapView, Graphic, GraphicsLayer, Point, SpatialReference, PictureMarkerSymbol, BaseTileLayer, esriRequest) {
//新建矢量图层
var bsLayer = BaseTileLayer.createSubclass({
properties: {
urlTemplate: null,
},
getTileUrl: function (level, row, col) {
return url = 'http://webrd0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=' + col + '&y=' + row + '&z=' + level;
},
fetchTile: function (level, row, col) {
var url = this.getTileUrl(level, row, col);
return esriRequest(url, {
responseType: "image"
})
.then(function (response) {
var image = response.data;
var width = this.tileInfo.size[0];
var height = this.tileInfo.size[0];
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
context.drawImage(image, 0, 0, width, height);
return canvas;
}.bind(this));
}
})
var GaodeLayer = new bsLayer();
//var GaodeLayer = new GaodeLayer();
//json格式的地理数据
var map = new Map({
layers: [GaodeLayer]
});
var view = new MapView({
container: "view",
map: map,
center: [106.71543991100576, 26.58363100116717],
zoom: 10
});
});
</script>
</head>
<body>
<div id="view"></div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-2d_base_loadSuperMap3.x.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>WMTS地图北斗服务3.x</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_3.x/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://apaas.wodcloud.com/api_3.x/init.js"></script>
<script>
require([
"esri/map",
"esri/layers/WMTSLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/WMTSLayerInfo",
"esri/geometry/Extent",
"esri/layers/TileInfo",
"esri/SpatialReference",
"dojo/domReady!"
], function (
Map,
WMTSLayer,
ArcGISDynamicMapServiceLayer,
WMTSLayerInfo,
Extent,
TileInfo,
SpatialReference
) {
var map = new Map("map", {
center: [116.7, 34.5],
zoom: 8
});
var tileInfo = new TileInfo({
"dpi": 96,
"format": "image/png",
"compressionQuality": 0,
"spatialReference": new SpatialReference({
"wkid": 4490
}),
"rows": 256,
"cols": 256,
"origin": {
"x": -180,
"y": 90
},
"lods": [
{ "level": "0", "scale": 295829355.45, "resolution": 0.703125 },
{ "level": "1", "scale": 147914677.725, "resolution": 0.3515625 },
{ "level": "2", "scale": 73957338.8625, "resolution": 0.17578125 },
{ "level": "3", "scale": 36978669.43125, "resolution": 0.087890625 },
{ "level": "4", "scale": 18489334.715625, "resolution": 0.0439453125 },
{ "level": "5", "scale": 9244667.3578125, "resolution": 0.02197265625 },
{ "level": "6", "scale": 4622333.67890625, "resolution": 0.010986328125 },
{ "level": "7", "scale": 2311166.83945312, "resolution": 0.0054931640625 },
{ "level": "8", "scale": 1155583.41972656, "resolution": 0.00274658203125 },
{ "level": "9", "scale": 577791.709863281, "resolution": 0.001373291015625 },
{ "level": "10", "scale": 288895.8549316406, "resolution": 0.0006866455078125 },
{ "level": "11", "scale": 144447.9274658203, "resolution": 0.00034332275390625 },
{ "level": "12", "scale": 4508.935440959931, "resolution": 0.000171661376953125 },
{ "level": "13", "scale": 36111.98186645508, "resolution": 0.0000858306884765625 },
{ "level": "14", "scale": 18055.99093322754, "resolution": 0.0000429153442382812 },
{ "level": "15", "scale": 9027.99546661377, "resolution": 0.0000214576721191406 },
{ "level": "16", "scale": 4513.997733306885, "resolution": 0.0000107288360595703 },
{ "level": "17", "scale": 2256.9988666534423, "resolution": 0.00000536441802978515 },
{ "level": "18", "scale": 1128.4994333267211, "resolution": 0.00000268220901489257 },
{ "level": "19", "scale": 564.2497166633606, "resolution": 0.00000134110450744628 }
]
});
var tileExtent = new Extent(-180.0, -85.0511287798065, 180.0, 85.05112877980648, new SpatialReference({
wkid: 4490
}));
var layerInfo = new WMTSLayerInfo({
tileInfo: tileInfo,
fullExtent: tileExtent,
initialExtent: tileExtent,
identifier: "guizhou",
tileMatrixSet: "ChinaPublicServices_guizhou",
format: "image/png",
style: "default"
});
var resourceInfo = {
version: "1.0.0",
layerInfos: [layerInfo],
copyright: ""
};
var options = {
serviceMode: "KVP",
resourceInfo: resourceInfo,
layerInfo: layerInfo
};
var wmtsLayer = new WMTSLayer("http://apaas.gy.wodcloud.com/iserver/services/map-guizhou/wmts-china", options);
map.addLayer(wmtsLayer);
var atmsl = ArcGISDynamicMapServiceLayer("https://apaasgis-zw.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer");
map.addLayer(atmsl);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-2d_base_loadSuperMap4.x.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>WMTS地图北斗服务4.x</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/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/layers/MapImageLayer",
"esri/geometry/SpatialReference",
"esri/widgets/DistanceMeasurement2D",
"esri/widgets/AreaMeasurement2D",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/Point",
"esri/geometry/SpatialReference",
"esri/symbols/PictureMarkerSymbol",
"dojo/domReady!"
], function (Map, MapView, WebTileLayer, TileInfo, MapImageLayer, SpatialReference, DistanceMeasurement2D, AreaMeasurement2D, Graphic, GraphicsLayer, Point, SpatialReference, PictureMarkerSymbol) {
var tileInfo = new TileInfo({
"dpi": 96,
"format": "image/png",
"compressionQuality": 0,
"spatialReference": new SpatialReference(4326),
"rows": 256,
"cols": 256,
"origin": {
"x": -180,
"y": 90
},
"lods": [
{ "level": "0", "scale": 295829355.45, "resolution": 0.703125 },
{ "level": "1", "scale": 147914677.725, "resolution": 0.3515625 },
{ "level": "2", "scale": 73957338.8625, "resolution": 0.17578125 },
{ "level": "3", "scale": 36978669.43125, "resolution": 0.087890625 },
{ "level": "4", "scale": 18489334.715625, "resolution": 0.0439453125 },
{ "level": "5", "scale": 9244667.3578125, "resolution": 0.02197265625 },
{ "level": "6", "scale": 4622333.67890625, "resolution": 0.010986328125 },
{ "level": "7", "scale": 2311166.83945312, "resolution": 0.0054931640625 },
{ "level": "8", "scale": 1155583.41972656, "resolution": 0.00274658203125 },
{ "level": "9", "scale": 577791.709863281, "resolution": 0.001373291015625 },
{ "level": "10", "scale": 288895.8549316406, "resolution": 6.866455078125E-4 },
{ "level": "11", "scale": 144447.9274658203, "resolution": 3.4332275390625E-4 },
{ "level": "12", "scale": 4508.935440959931, "resolution": 1.71661376953125E-4 },
{ "level": "13", "scale": 36111.98186645508, "resolution": 8.58306884765625E-5 },
{ "level": "14", "scale": 18055.99093322754, "resolution": 4.291534423828125E-5 },
{ "level": "15", "scale": 9027.99546661377, "resolution": 2.1457672119140625E-5 },
{ "level": "16", "scale": 4513.997733306885, "resolution": 1.0728836059570312E-5 },
{ "level": "17", "scale": 2256.9988666534423, "resolution": 5.364418029785156E-6 },
{ "level": "18", "scale": 1128.4994333267211, "resolution": 2.682209014892578E-6 },
{ "level": "19", "scale": 564.2497166633606, "resolution": 1.341104507446289E-6 }
]
});
var layer = new WebTileLayer(
{
// urlTemplate:"http://jgsw.gy.wodcloud.com/iserver/services/map-guizhou/wmts-china/guizhou/default/ChinaPublicServices_guizhou/{level}/{row}/{col}.png",
urlTemplate: "http://jgsw.gy.wodcloud.com/iserver/services/map-guizhou/wmts-china?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=guizhou&STYLE=default&FORMAT=image/png&TILEMATRIXSET=ChinaPublicServices_guizhou&tileMatrix={level}&tileRow={row}&tileCol={col}",
tileInfo: tileInfo,
spatialReference: new SpatialReference(4326),
}
);
var url = "https://apaas.wodcloud.com/mapsamples/static/data/JZD_CGCS2000_GK_108_3.json"
// var url = "../../data/JZD_CGCS2000_BEIDOU.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 imgaeURL = require("../../../static/images/marker-yellow.png");
// var symbol = new PictureMarkerSymbol(imgaeURL,26, 37);
var attr = {
"name": reportor,
"happenedTime": happenedTime,
"happenedAddress": happenedAddress,
"detail": description
};
var graphic = new Graphic(pt, symbol, attr);
footprintlayer.add(graphic);
}
}
}
// 创建地图
var map = new Map();
map.add(layer);
//map.add(footprintlayer);
// 创建二维地图
var view = new MapView({
container: "viewDiv",
map: map,
center: [106.72, 26.585],
zoom: 10,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
});
// var ml = new MapImageLayer({
// url: "http://apaasgis-zw.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer",
// spatialReference: new SpatialReference(4326),
// })
// map.add(ml);
var measurementWidget = new DistanceMeasurement2D({
view: view
});
view.ui.add(measurementWidget, "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-2d_base_map.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>2D Base Map</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/api_4.x/init.js"></script>
<script>
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [108.3, 33.9]
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-2d_base_popup.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>FindTask多图层查询__4.X(缩放到图层的方法已经写，但是没有缩放到图层，查询的原始数据的范围本身有问题)))</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>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#optionsDiv {
background-color: dimgray;
color: white;
padding: 5px;
width: 250px;
}
.esri-popup .esri-popup-header .esri-title {
font-size: 18px;
font-weight: bolder;
}
.esri-popup .esri-popup-body .esri-popup-content {
font-size: 14px;
}
</style>
<script>
require([
"dojo/promise/all",
"esri/layers/WebTileLayer",
"esri/Map",
"esri/layers/MapImageLayer",
"esri/layers/FeatureLayer",
"esri/geometry/Point",
'esri/views/MapView',
"esri/Basemap",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/layers/GraphicsLayer",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/tasks/FindTask",
"esri/tasks/support/FindParameters",
"dojo/dom"
], function (all, WebTileLayer, Map, MapImageLayer, FeatureLayer, Point, MapView, Basemap, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, GraphicsLayer, QueryTask, Query, FindTask, FindParameters, dom) {
var tiandituBaseUrl = "http://{subDomain}.tianditu.gov.cn"; //天地图服务地址
var token = "174705aebfe31b79b3587279e211cb9a"; //天地图token
//矢量地图(球面墨卡托投影)
var tiledLayer = new WebTileLayer({
urlTemplate:
tiandituBaseUrl + "/vec_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + token,
subDomains:
["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
//矢量注记(球面墨卡托投影)
var tiledLayerAnno = new WebTileLayer({
urlTemplate:
tiandituBaseUrl + "/cva_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + token,
subDomains:
["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
// var map = new Map();
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, tiledLayerAnno],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
});
//叠加要查询的图层
mapserverUrl = "http://apaasgis.wodcloud.com/server/rest/services/ZJ_CX_ZZ/MapServer";
var mapLayer = new MapImageLayer({
url: mapserverUrl
});
var map = new Map({
basemap: tdtBasemap,
layers: [mapLayer]
});
//arcgisserver的View
var view = new MapView({
container: "viewDiv",
map: map,
center: [120.06176192500004, 30.996704835000003],
scale: 144285.93411071779
});
view.when(function () {
view.ui.add("optionsDiv", "top-right");
dom.byId("doSeach").addEventListener("click", findTaskExecute);
});
function findTaskExecute() {
var findTask = new FindTask({
url: mapserverUrl
});
var allLayerIds = [1, 2, 3, 5, 10, 11, 12, 13];
var seachKey = dom.byId("stateName").value;
if (seachKey && seachKey != "") {
var findTaskParameters = new FindParameters();
findTaskParameters.returnGeometry = true;//是否返回几何数据
findTaskParameters.contains = true; //接受模糊查询
findTaskParameters.layerIds = allLayerIds;
findTaskParameters.searchFields = ["NAME", "PCSXQMC", "JJXQMC", "LXMC"];//限定查询的字段，如果不指定此参数，则查询所有的字段
findTaskParameters.searchText = seachKey;
findTask
.execute(findTaskParameters)
.then((res) => {
if (res) {
//如果返回有值
console.log(res);
//对结果进行处理
var featureSource = renderResult(res);
resultsLayer.addMany(featureSource);
//移动地图到结果处(按范围缩放)
// var layer = new FeatureLayer({
// source: featureSource, // autocast as a Collection of new Graphic()
// });
//view.goTo(resultsLayer.fullExtent);
map.add(resultsLayer);
} else {
console.log("查询数据失败");
}
})
.catch((error) => {
console.log(error);
});
}
}
//查询结果的样式文件
//点样式
var pointSymbol = new SimpleMarkerSymbol({
style: "circle",
color: "red",
size: "10"
});
//线样式
var polylineSymbol = new SimpleLineSymbol({
type: "simple-line", // autocasts as new SimpleLineSymbol()
color: "lightblue",
width: "2px",
style: "short-dot"
});
//面样式
var polygonSymbol = new SimpleFillSymbol({
color: [255, 0, 0, 0.5]
});
//弹出层 点
var popupPointTemplate = {
title: "{名称}",
content: "<b>名称:</b> {名称}" + "<br> <b>地址:</b> {地址}"
};
//弹出层 线
var popupPolylineTemplate = {
title: "{名称}",
content: "<b>名称:</b> {JJXQMC}"
};
//弹出层 面
var popupPolygonTemplate = {
title: "{名称}",
content: "<b>名称:</b> {JJXQMC}"
};
//查询结果图层
var resultsLayer = new GraphicsLayer();
function compare(a, b) {
return a - b;
}
//渲染查询的结果
function renderResult(res) {
//清空上次查询
if (resultsLayer) {
resultsLayer.removeAll();
}
var featureSource = [];
var extentArrayX = [];
var extentArrayY = [];
var pt;
if (res.results && res.results.length > 0) {
for (var i = 0; i < res.results.length; i++) {
var featureType = res.results[i].feature.geometry.type;
var feature = res.results[i].feature;
if (featureType == "point") {
//点
feature.symbol = pointSymbol;
feature.popupTemplate = popupPointTemplate;
//注释的代码是求extent的
// extentArrayX.push(feature.geometry.x);
// extentArrayY.push(feature.geometry.y);
var x = res.results[i].feature.geometry.x;
var y = res.results[i].feature.geometry.y;
if (x > 100 && x < 120 && y > 20 && y < 30) {
pt = new Point({
latitude: y,
longitude: x
});
}
featureSource.push(feature);
}
else if (featureType == "polyline") {
//线
feature.symbol = polylineSymbol;
feature.popupTemplate = popupPolylineTemplate;
//注释的代码是求extent的
// extentArrayX.push(feature.geometry.extent.xmin);
// extentArrayX.push(feature.geometry.extent.xmax);
// extentArrayY.push(feature.geometry.extent.ymin);
// extentArrayY.push(feature.geometry.extent.ymax);
var x = res.results[i].feature.geometry.extent.xmax;
var y = res.results[i].feature.geometry.extent.ymax;
featureSource.push(feature);
} else if (featureType == "polygon") {
//面
feature.symbol = polygonSymbol;
feature.popupTemplate = popupPolygonTemplate;
//注释的代码是求extent的
// extentArrayX.push(feature.geometry.extent.xmin);
// extentArrayX.push(feature.geometry.extent.xmax);
// extentArrayY.push(feature.geometry.extent.ymin);
// extentArrayY.push(feature.geometry.extent.ymax);
// pt = new Point({
// latitude: res.results[i].feature.geometry.extent.xmax,
// longitude: res.results[i].feature.geometry.extent.ymax
// });
featureSource.push(feature);
}
}
//注释的代码是求extent的问题
// extentArrayX.sort(compare);
// extentArrayY.sort(compare);
// var result = [extentArrayX[0], extentArrayY[0], extentArrayX[extentArrayX.length - 1], extentArrayY[extentArrayY.length - 1]]
//缩放到图层
view.goTo({
target: pt,
zoom: 14
});
return featureSource; //本身就是一个FeatureLayer
} else {
return null
}
}
//缩放至图层
function zoomToLayer(result) {
console.log(result)
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<!-- <div class="esri-widget" id="optionsDiv">
<h2>查询名称</h2>
<input type="text" class="esri-widget" id="stateName" value="云岩">
<button class="esri-widget" id="doSeach">查询</button>
<br />
</div> -->
</body>
</html>
\ No newline at end of file
static/view/demo/page-2d_buffer_analysis.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Buffer</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_3.x/esri/css/esri.css">
<!-- <scrip src="https://apaas.wodcloud.com/mapsamples/static/js/echarts.min.js"> -->
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.mycharts {
background: #fff;
width: 400px;
position: absolute;
top: 0px;
right: 0px;
overflow-y: auto;
box-shadow: 0px 2px 20px -5px #1b8cf2;
}
.mycharts .chart_pie {
width: 400px;
height: 180px;
}
#leftPane {
color: #000;
width: 250px;
padding-bottom: 15px;
}
#map {
padding: 0;
}
.details {
font-size: 14px;
font-weight: 600;
padding-bottom: 20px;
}
button {
margin: 2px;
cursor: pointer;
}
</style>
<script src="https://apaas.wodcloud.com/api_3.x/init.js"></script>
<script>
var map, tb;
require(["dojo/dom",
"dojo/promise/all",
"dojo/_base/array",
"dojo/parser",
"dojo/query",
"dojo/on",
"esri/map",
"esri/layers/TileInfo",
"esri/layers/WebTiledLayer",
"esri/basemaps",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/FeatureLayer",
"https://apaas.wodcloud.com/mapsamples/static/js/echarts.min.js",
"esri/geometry/Point",
"esri/Color",
"esri/config",
"esri/graphic",
"esri/geometry/normalizeUtils",
"esri/tasks/GeometryService",
"esri/tasks/BufferParameters",
"esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"esri/SpatialReference",
"dijit/form/Button",
"dojo/domReady!"
],
function (dom, All, array, parser, query, on, Map, TileInfo, WebTiledLayer, esriBasemaps, ArcGISDynamicMapServiceLayer, FeatureLayer, echarts, Point, Color, esriConfig, Graphic, normalizeUtils, GeometryService, BufferParameters, Draw, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, SpatialReference) {
parser.parse();
esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
esriConfig.defaults.io.proxyUrl = "/proxy/";
esriConfig.defaults.io.alwaysUseProxy = false;
//Setup button click handlers
on(dom.byId("clearGraphics"), "click", function () {
if (map) {
map.graphics.clear();
}
});
//click handler for the draw tool buttons
query(".tool").on("click", function (evt) {
if (tb) {
tb.activate(evt.target.id);
}
});
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
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
});
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', 't5', 't6', 't7'],
tileInfo: tileInfo
});
map = new Map('map', {
/*地图中心点*/
center: [106.720725933, 26.5453458492],
//center: [12944641.344764, 3577008.310327],
/*地图默认缩放等级*/
zoom: 10,
/*地图最大缩放等级*/
maxZoom: 20,
/*地图最小缩放等级*/
minZoom: 2,
/*关闭缩放按钮*/
slider: false,
/*关闭logo*/
logo: false,
spatialReference: {
wkid: 4490
},
});
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
var tileInfo = new TileInfo({
dpi: 90.71428571427429,
rows: 256,
cols: 256,
compressionQuality: 0,
origin: {
x: -180,
y: 90
},
spatialReference: {
wkid: 4490
},
lods: [{
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: 20,
resolution: 1.341104507446289075e-006,
scale: 563.616930119991375
}]
});
// mapserverUrl = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer";
// var mapLayer = new MapImageLayer({
// url: mapserverUrl
// });
var demographicsLayerURL = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer";
var demographicsLayerOptions = {
"id": "demographicsLayer",
"opacity": 0.8,
"showAttribution": false
};
var demographicsLayer = new ArcGISDynamicMapServiceLayer(demographicsLayerURL, demographicsLayerOptions);
// map.addLayer(annomap);
map.addLayer(demographicsLayer);
// map.on("load", initToolbar); //这一句一定得放在mapaddLayer前面（官网说法不准，应该是map初始化完成后就添加）
// map.addLayer(basemap);
// map.centerAndZoom(new Point({
// x: 106.720725933,
// y: 26.5453458492,
// spatialReference: {
// wkid: 4326
// }
// }), 8);
function initToolbar(evtObj) {
console.log("初始化工具");
tb = new Draw(evtObj.map);
tb.on("draw-end", doBuffer);
}
function doBuffer(evtObj) {
tb.deactivate();
var geometry = evtObj.geometry, symbol;
switch (geometry.type) {
case "point":
symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25]));
break;
case "polyline":
symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1);
break;
case "polygon":
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]));
break;
}
var graphic = new Graphic(geometry, symbol);
map.graphics.add(graphic);
//setup the buffer parameters
var params = new BufferParameters();
params.distances = [dom.byId("distance").value];
params.outSpatialReference = map.spatialReference;
params.unit = GeometryService[dom.byId("unit").value];
//normalize the geometry
normalizeUtils.normalizeCentralMeridian([geometry]).then(function (normalizedGeometries) {
var normalizedGeometry = normalizedGeometries[0];
if (normalizedGeometry.type === "polygon") {
//if geometry is a polygon then simplify polygon. This will make the user drawn polygon topologically correct.
esriConfig.defaults.geometryService.simplify([normalizedGeometry], function (geometries) {
params.geometries = geometries;
esriConfig.defaults.geometryService.buffer(params, showBuffer);
});
} else {
params.geometries = [normalizedGeometry];
esriConfig.defaults.geometryService.buffer(params, showBuffer, showEror);
}
});
}
//错误打印
function showEror(e) {
console.log("打出错误");
console.log(e);
}
function showBuffer(bufferedGeometries) {
// overlayAnalysis(bufferedGeometries);
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0, 0.65]), 2
),
new Color([255, 0, 0, 0.35])
);
array.forEach(bufferedGeometries, function (geometry) {
var graphic = new Graphic(geometry, symbol);
overlayAnalysis(geometry);
map.graphics.add(graphic);
});
}
//缓冲区叠加分析
function overlayAnalysis(geometry) {
map.graphics.clear();//清除样式
const query = {
geometry: geometry,
outFields: ["*"],
returnGeometry: true
};
var searchLayer_1 = new FeatureLayer("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/1");
var searchLayer_2 = new FeatureLayer("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/2");
var searchLayer_3 = new FeatureLayer("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/3");
var searchLayer_4 = new FeatureLayer("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/5");
var searchLayer_5 = new FeatureLayer("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/10");
var searchLayer_6 = new FeatureLayer("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/11");
var searchLayer_7 = new FeatureLayer("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/12");
var searchLayer_8 = new FeatureLayer("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/13");
var searchLayers = [searchLayer_1, searchLayer_2, searchLayer_3, searchLayer_4, searchLayer_5, searchLayer_6, searchLayer_7, searchLayer_8];
var echartsData = [];
var searchRequest = [];
if (searchLayers.length > 0) {
for (var i = 0; i < searchLayers.length; i++) {
// echartsData.push(searchLayers[i].title);
searchRequest.push(searchLayers[i].queryFeatures(query));
}
}
var titleArray = ["公安机构", "旅馆", "网吧终端", "省道", "交警辖区", "派出所辖区", "分局辖区", "市局辖区"];
All(searchRequest).then(res => {
if (res.length > 0) {
for (var i = 0; i < res.length; i++) {
//res[i].title = echartsData[i];
var charData = { "name": "", "value": 0 };
charData.name = titleArray[i];
charData.value = res[i].features.length;
echartsData.push(charData);
console.log("输出echartsData");
//console.log(echartsData);
renderResult(res[i].features)
}
//缩放到缓冲区的范围
//echart的结果
initEChartPie(echartsData);
}
});
}
//渲染结果
function renderResult(data) {
//console.log(data);
if (data.length > 0) {
for (var j = 0; j < data.length; j++) {
if (data[j]._layer.geometryType == "esriGeometryPoint") {
data[j].setSymbol(
new SimpleMarkerSymbol()
.setColor(new Color([255, 24, 156, 1]))
.setSize("5")
);
map.graphics.add(data[j]);
}
if (data[j]._layer.geometryType == "esriGeometryPolyline") {
data[j].setSymbol(
new SimpleLineSymbol({
type: "simple-line",
color: "lightblue",
width: "2px",
style: "short-dot"
})
);
map.graphics.add(data[j]);
}
if (data[j]._layer.geometryType == "esriGeometryPolygon") {
data[j].setSymbol(
new SimpleFillSymbol({
color: [255, 0, 0, 0.4]
})
);
map.graphics.add(data[j]);
}
}
}
}
function callbackResult(res) {
console.log("打印输出");
console.log(res);
}
function showError(e) {
console.log(e);
}
//初始化echarts表
function initEChartPie(dataGov) {
console.log("进入echarts方法111");
var chart_pie_gov = echarts.init(document.getElementById("chart_pie"));
var option_gov = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [
{
name: '查询结果统计',
type: 'pie',
radius: ['50%', '70%'],
label: {
normal: {
show: true,
formatter: "{b}:{c} \n {d}%"
}
},
data: dataGov
}
]
};
chart_pie_gov.setOption(option_gov);
};
window.onload = function () {
map.on("load", initToolbar);
}
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:'true', design:'sidebar'"
style="width:100%;height:100%;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
</div>
<div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">
<div class="details">选择缓冲区类型</div>
<button type="button" class="tool" id="point">点</button>
<button type="button" class="tool" id="polyline">线</button>
<br />
<button type="button" class="tool" id="polygon">面</button>
<br />
<hr />
<div><b>缓冲参数</b></div>
距离: <input type="text" id="distance" size="5" value="0.1" />
<select id="unit" style="width:100px;">
<option value="UNIT_DEGREE">度</option>
<option value="UNIT_STATUTE_MILE">英里</option>
<option value="UNIT_FOOT">英尺</option>
<option value="UNIT_KILOMETER">公里</option>
<option value="UNIT_METER">米</option>
<option value="UNIT_NAUTICAL_MILE">海里</option>
</select><br />
<button type="button" id="clearGraphics">清除缓冲范围</button>
</div>
</div>
<div class="mycharts" id="mycharts">
<div class="chart_pie" id="chart_pie"></div>
</div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-2d_csvlayer.html 0 → 100644
View file @ cb7659f4
<!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>
<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/api_4.x/init.js"></script>
<script>
require([
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/layers/CSVLayer",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color"
], function (Map, Basemap, MapView, WebTileLayer, TileInfo, CSVLayer, SimpleRenderer, SimpleMarkerSymbol, Color) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
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
},
});
// csv文件的url
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}."
};
var csvLayer = new CSVLayer({
url: url,
copyright: "big-data",
popupTemplate: template,
elevationInfo: {
mode: "on-the-ground"
}
});
//csv图层的渲染配置
csvLayer.renderer = {
type: "simple",
symbol: {
type: "simple-marker",
size: 8,
color: [245,125,33],
outline: {
width: 1,
color: "white"
}
}
};
// 创建地图数据
var map = new Map({
basemap: tdtBasemap,
layers: [csvLayer]
});
// 创建二维地图视图
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 4,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [108.3, 33.9]
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-2d_featureEditor3.x.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>3.x编辑数据</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_3.x/esri/css/esri.css">
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_3.x/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_3.x/esri/css/esri.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
#map {
padding: 0;
}
#header {
font-size: 1.1em;
font-family: sans-serif;
padding-left: 1em;
padding-top: 4px;
color: #660000;
}
.templatePicker {
border: none;
}
.dj_ie .infowindow .window .top .right .user .content {
position: relative;
}
.dj_ie .simpleInfoWindow .content {
position: relative;
}
</style>
<script src="https://apaas.wodcloud.com/api_3.x/init.js"></script>
<script>
require(["esri/map",
"esri/tasks/GeometryService",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/Color",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/dijit/editing/Editor",
"esri/dijit/editing/TemplatePicker",
"esri/config",
"dojo/i18n!esri/nls/jsapi",
"dojo/_base/array", "dojo/parser", "dojo/keys",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"], function (Map, GeometryService,
ArcGISTiledMapServiceLayer, FeatureLayer,
Color, SimpleMarkerSymbol, SimpleLineSymbol,
Editor, TemplatePicker,
esriConfig, jsapiBundle,
arrayUtils, parser, keys) {
parser.parse();
jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start + "<br>Press <b>ALT</b> to enable snapping";
esriConfig.defaults.io.proxyUrl = "/proxy/";
esriConfig.defaults.geometryService = new GeometryService("http://apaas.mesh.gat.gz/arcgis/rest/services/Utilities/Geometry/GeometryServer");
map = new Map("map", {
basemap: "streets",
center: [120.0450645, 31.00552071],
zoom: 10
});
map.on("layers-add-result", initEditor);
//add boundaries and place names
// var labels = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
// map.addLayer(labels);
var responsePoints = new FeatureLayer("https://arcgisserver.wodcloud.com/arcgis/rest/services/guizhoutestTwo/FeatureServer/0", {
className: "线",
mode: FeatureLayer.MODE_ONDEMAND,
showAttribution: false,
showLabels: true,
outFields: ['*']
});
var responsePolys = new FeatureLayer("https://arcgisserver.wodcloud.com/arcgis/rest/services/guizhoutestTwo/FeatureServer/2", {
className: "网格",
mode: FeatureLayer.MODE_ONDEMAND,
showAttribution: false,
showLabels: true,
outFields: ['*']
});
map.addLayers([responsePolys, responsePoints]);
function initEditor(evt) {
var templateLayers = arrayUtils.map(evt.layers, function (result) {
return result.layer;
});
var templatePicker = new TemplatePicker({
featureLayers: templateLayers,
grouping: true,
rows: "auto",
columns: 3
}, "templateDiv");
templatePicker.startup();
var layers = arrayUtils.map(evt.layers, function (result) {
return { featureLayer: result.layer };
});
var settings = {
map: map,
templatePicker: templatePicker,
layerInfos: layers,
toolbarVisible: true,
toolbarOptions: {
reshapeVisible: true,
mergeVisible: true,
cutVisible: true,
},
createOptions: {
polylineDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYLINE],
polygonDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYGON,
Editor.EDIT_VERTICES,
Editor.CREATE_TOOL_CIRCLE,
Editor.CREATE_TOOL_TRIANGLE,
Editor.CREATE_TOOL_RECTANGLE,
]
}
};
var params = { settings: settings };
var myEditor = new Editor(params, 'editorDiv');
//define snapping options
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CROSS,
15,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0, 0.5]),
5
),
null
);
map.enableSnapping({
snapPointSymbol: symbol,
tolerance: 20,
snapKey: keys.ALT
});
myEditor.startup();
}
});
</script>
</head>
<body class="claro">
<div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
style="width:100%;height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"
style="width: 300px;overflow:hidden;">
<div id="templateDiv"></div>
<div id="editorDiv"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-2d_featureEditor3.x_guizhou.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>3.x编辑数据—贵州</title>
<link rel="stylesheet" href="http://apaas.mesh.gat.gz/api_3.x/esri/css/esri.css">
<link rel="stylesheet" href="http://apaas.mesh.gat.gz/api_3.x/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://apaas.mesh.gat.gz/api_3.x/esri/css/esri.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
#map {
padding: 0;
}
#header {
font-size: 1.1em;
font-family: sans-serif;
padding-left: 1em;
padding-top: 4px;
color: #660000;
}
.templatePicker {
border: none;
}
.dj_ie .infowindow .window .top .right .user .content {
position: relative;
}
.dj_ie .simpleInfoWindow .content {
position: relative;
}
</style>
<script src="http://apaas.mesh.gat.gz/api_3.x/init.js"></script>
<script>
// 设定瓦片信息
var lods = [];
var minScale = 559082264.0287178;
var maxResolution = 1.40625;
var tempScale = minScale;
var tempResolution = maxResolution;
for (let i = 0; i <= 18; i++) {
let lod = {
"level": i,
"resolution": tempResolution,
"scale": tempScale
}
if (i >= 0) {
lods.push(lod);
}
tempScale = tempScale / 2;
tempResolution = tempResolution / 2;
}
require(["esri/map",
"esri/tasks/GeometryService",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/Color",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/dijit/editing/Editor",
"esri/dijit/editing/TemplatePicker",
"esri/config",
"dojo/i18n!esri/nls/jsapi",
"dojo/_base/array", "dojo/parser", "dojo/keys",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"], function (Map, GeometryService,
ArcGISTiledMapServiceLayer, FeatureLayer,
Color, SimpleMarkerSymbol, SimpleLineSymbol,
Editor, TemplatePicker,
esriConfig, jsapiBundle,
arrayUtils, parser, keys) {
//原先的配置
parser.parse();
jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start + "<br>Press <b>ALT</b> to enable snapping";
esriConfig.defaults.io.proxyUrl = "/proxy/";
esriConfig.defaults.geometryService = new GeometryService("hhttps://arcgisserver.wodcloud.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");
// map = new Map("map", {
// basemap: "streets",
// center: [120.0450645, 31.00552071],
// zoom: 10
// });
//加载顺丰底图
var map = new Map("map", {
/*地图中心点*/
center: [106.720725933, 26.5453458492],
/*地图默认缩放等级*/
zoom: 8,
/*地图最大缩放等级*/
maxZoom: 18,
/*地图最小缩放等级*/
minZoom: 3,
/*关闭缩放按钮*/
// slider: false,
/*关闭logo*/
logo: false
});
// 设定瓦片信息，aPaaS底图的切片信息全部使用该信息设定
var tileInfo = new TileInfo({
dpi: 90.71428571427429,
rows: 256,
cols: 256,
compressionQuality: 0,
origin: {
x: -180,
y: 90
},
spatialReference: {
wkid: 4326
},
lods: lods
});
// aPaaS底图
// 在加载经纬度地图的时候我们需要使用 {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
// http://apaas.mesh.gat.gz/guizhou/wmts?token=2ce94f67e58faa24beb7cb8a09780552&service=WMTS&request=GetTile&VERSION=1.0.0&LAYER=sfmap&STYLE=default&TILEMATRIXSET=c&FORMAT=image/png&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}
var tiledlayer = WebTiledLayer("http://apaas.mesh.gat.gz/guizhou/wmts?token=2ce94f67e58faa24beb7cb8a09780552&service=WMTS&request=GetTile&VERSION=1.0.0&LAYER=sfmap&STYLE=default&TILEMATRIXSET=c&FORMAT=image/png&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}", {
tileInfo: tileInfo
});
map.addLayer(tiledlayer);
map.on("layers-add-result", initEditor);
//add boundaries and place names
// var labels = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
// map.addLayer(labels);
var responseLines = new FeatureLayer("https://arcgisserver.wodcloud.com/arcgis/rest/services/guizhoutestTwo/FeatureServer/0", {
className: "线",
mode: FeatureLayer.MODE_ONDEMAND,
showAttribution: false,
showLabels: true,
outFields: ['*']
});
var responsePolys = new FeatureLayer("https://arcgisserver.wodcloud.com/arcgis/rest/services/guizhoutestTwo/FeatureServer/2", {
className: "网格",
mode: FeatureLayer.MODE_ONDEMAND,
showAttribution: false,
showLabels: true,
outFields: ['*']
});
map.addLayers([responsePolys, responseLines]);
function initEditor(evt) {
var templateLayers = arrayUtils.map(evt.layers, function (result) {
return result.layer;
});
var templatePicker = new TemplatePicker({
featureLayers: templateLayers,
grouping: true,
rows: "auto",
columns: 3
}, "templateDiv");
templatePicker.startup();
var layers = arrayUtils.map(evt.layers, function (result) {
return { featureLayer: result.layer };
});
var settings = {
map: map,
templatePicker: templatePicker,
layerInfos: layers,
toolbarVisible: true,
toolbarOptions: {
reshapeVisible: true,
mergeVisible: true,
cutVisible: true,
},
createOptions: {
polylineDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYLINE],
polygonDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYGON,
Editor.EDIT_VERTICES,
Editor.CREATE_TOOL_CIRCLE,
Editor.CREATE_TOOL_TRIANGLE,
Editor.CREATE_TOOL_RECTANGLE,
]
}
};
var params = { settings: settings };
var myEditor = new Editor(params, 'editorDiv');
//define snapping options
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CROSS,
15,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0, 0.5]),
5
),
null
);
map.enableSnapping({
snapPointSymbol: symbol,
tolerance: 20,
snapKey: keys.ALT
});
myEditor.startup();
}
});
</script>
</head>
<body class="claro">
<div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
style="width:100%;height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"
style="width: 300px;overflow:hidden;">
<div id="templateDiv"></div>
<div id="editorDiv"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-2d_featureEditor3.x_two.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Landuse</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.30/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.30/esri/css/esri.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#header {
border: solid 2px #462d44;
background: #fff;
color: #444;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: sans-serif;
font-size: 1.1em;
padding-left: 20px;
}
#map {
padding: 1px;
border: solid 2px #444;
-moz-border-radius: 4px;
border-radius: 4px;
}
#rightPane {
border: none;
padding: 0;
width: 228px;
}
.templatePicker {
border: solid 2px #444;
}
</style>
<script src="https://js.arcgis.com/3.30/"></script>
<script>
var map;
require([
"esri/map",
"esri/toolbars/draw",
"esri/toolbars/edit",
"esri/graphic",
"esri/config",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/dijit/editing/TemplatePicker",
"dojo/_base/array",
"dojo/_base/event",
"dojo/_base/lang",
"dojo/parser",
"dijit/registry",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/form/Button", "dojo/domReady!"
], function (
Map, Draw, Edit, Graphic, esriConfig,
FeatureLayer,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
TemplatePicker,
arrayUtils, event, lang, parser, registry
) {
parser.parse();
// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
esriConfig.defaults.io.proxyUrl = "/proxy/";
// This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
esriConfig.defaults.geometryService = new esri.tasks.GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map = new Map("map", {
basemap: "streets",
center: [120.0450645, 31.00552071],
zoom: 10
});
map.on("layers-add-result", initEditing);
var landusePointLayer = new FeatureLayer("https://arcgisserver.wodcloud.com/arcgis/rest/services/guizhoutestTwo/FeatureServer/0", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
var landuseLineLayer = new FeatureLayer("https://arcgisserver.wodcloud.com/arcgis/rest/services/guizhoutestTwo/FeatureServer/1", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
var landusePolygonLayer = new FeatureLayer("https://arcgisserver.wodcloud.com/arcgis/rest/services/guizhoutestTwo/FeatureServer/2", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
map.addLayers([landusePolygonLayer, landuseLineLayer, landusePointLayer]);
function initEditing(evt) {
console.log("initEditing", evt);
// var map = this;
var currentLayer = null;
var layers = arrayUtils.map(evt.layers, function (result) {
return result.layer;
});
console.log("layers", layers);
var editToolbar = new Edit(map);
editToolbar.on("deactivate", function (evt) {
currentLayer.applyEdits(null, [evt.graphic], null);
});
arrayUtils.forEach(layers, function (layer) {
var editingEnabled = false;
layer.on("dbl-click", function (evt) {
event.stop(evt);
if (editingEnabled === false) {
editingEnabled = true;
editToolbar.activate(Edit.EDIT_VERTICES, evt.graphic);
} else {
currentLayer = this;
editToolbar.deactivate();
editingEnabled = false;
}
});
layer.on("click", function (evt) {
event.stop(evt);
if (evt.ctrlKey === true || evt.metaKey === true) { //delete feature if ctrl key is depressed
layer.applyEdits(null, null, [evt.graphic]);
currentLayer = this;
editToolbar.deactivate();
editingEnabled = false;
}
});
});
var templatePicker = new TemplatePicker({
featureLayers: layers,
rows: "auto",
columns: 2,
grouping: true,
style: "height: auto; overflow: auto;"
}, "templatePickerDiv");
templatePicker.startup();
var drawToolbar = new Draw(map);
var selectedTemplate;
templatePicker.on("selection-change", function () {
if (templatePicker.getSelected()) {
selectedTemplate = templatePicker.getSelected();
}
switch (selectedTemplate.featureLayer.geometryType) {
case "esriGeometryPoint":
drawToolbar.activate(Draw.POINT);
break;
case "esriGeometryPolyline":
drawToolbar.activate(Draw.POLYLINE);
break;
case "esriGeometryPolygon":
drawToolbar.activate(Draw.POLYGON);
break;
}
});
drawToolbar.on("draw-end", function (evt) {
drawToolbar.deactivate();
editToolbar.deactivate();
var newAttributes = lang.mixin({}, selectedTemplate.template.prototype.attributes);
var newGraphic = new Graphic(evt.geometry, null, newAttributes);
selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
});
}
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true, design:'headline'"
style="width:100%;height:100%;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="templatePickerDiv"></div>
</div>
</div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-2d_findTaskLayers.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>FindTask多图层查询__4.X(缩放到图层的方法已经写，但是没有缩放到图层，查询的原始数据的范围本身有问题)))</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>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#optionsDiv {
background-color: dimgray;
color: white;
padding: 5px;
width: 250px;
}
.esri-popup .esri-popup-header .esri-title {
font-size: 18px;
font-weight: bolder;
}
.esri-popup .esri-popup-body .esri-popup-content {
font-size: 14px;
}
</style>
<script>
require([
"dojo/promise/all",
"esri/layers/WebTileLayer",
"esri/Map",
"esri/layers/MapImageLayer",
"esri/layers/FeatureLayer",
"esri/geometry/Point",
'esri/views/MapView',
"esri/Basemap",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/layers/GraphicsLayer",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/tasks/FindTask",
"esri/tasks/support/FindParameters",
"dojo/dom"
], function (all, WebTileLayer, Map, MapImageLayer, FeatureLayer, Point, MapView, Basemap, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, GraphicsLayer, QueryTask, Query, FindTask, FindParameters, dom) {
var tiandituBaseUrl = "http://{subDomain}.tianditu.gov.cn"; //天地图服务地址
var token = "174705aebfe31b79b3587279e211cb9a"; //天地图token
//矢量地图(球面墨卡托投影)
var tiledLayer = new WebTileLayer({
urlTemplate:
tiandituBaseUrl + "/vec_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + token,
subDomains:
["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
//矢量注记(球面墨卡托投影)
var tiledLayerAnno = new WebTileLayer({
urlTemplate:
tiandituBaseUrl + "/cva_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + token,
subDomains:
["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
// var map = new Map();
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, tiledLayerAnno],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
});
//叠加要查询的图层
//查询图层的地址
//mapserverUrl = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer";
//mapserverUrl = "https://apaasgis-zw.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer";
mapserverUrl = "https://apaasgis-zw.wodcloud.com/server/rest/services/GZ_LWZTT/MapServer";
var mapLayer = new MapImageLayer({
url: mapserverUrl
});
// var featureURL = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/FeatureServer";
// var featureLayer = new
var featureLayer = new FeatureLayer({
url:
"https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/FeatureServer/6"
});
var map = new Map({
basemap: tdtBasemap,
layers: [mapLayer]
});
//arcgisserver的View
var view = new MapView({
container: "viewDiv",
map: map,
center: [106.720725933, 26.5453458492],
scale: 144285.93411071779
});
view.when(function () {
view.ui.add("optionsDiv", "top-right");
dom.byId("doSeach").addEventListener("click", findTaskExecute);
});
function findTaskExecute() {
var findTask = new FindTask({
url: mapserverUrl
});
var allLayerIds = [1, 2, 3, 5, 10, 11, 12, 13];
var seachKey = dom.byId("stateName").value;
if (seachKey && seachKey != "") {
var findTaskParameters = new FindParameters();
findTaskParameters.returnGeometry = true;//是否返回几何数据
findTaskParameters.contains = true; //接受模糊查询
findTaskParameters.layerIds = allLayerIds;
findTaskParameters.searchFields = ["NAME", "PCSXQMC", "JJXQMC", "LXMC"];//限定查询的字段，如果不指定此参数，则查询所有的字段
findTaskParameters.searchText = seachKey;
findTask
.execute(findTaskParameters)
.then((res) => {
if (res) {
//如果返回有值
console.log(res);
//对结果进行处理
var featureSource = renderResult(res);
resultsLayer.addMany(featureSource);
//移动地图到结果处(按范围缩放)
// var layer = new FeatureLayer({
// source: featureSource, // autocast as a Collection of new Graphic()
// });
//view.goTo(resultsLayer.fullExtent);
map.add(resultsLayer);
} else {
console.log("查询数据失败");
}
})
.catch((error) => {
console.log(error);
});
}
}
//查询结果的样式文件
//点样式
var pointSymbol = new SimpleMarkerSymbol({
style: "circle",
color: "red",
size: "10"
});
//线样式
var polylineSymbol = new SimpleLineSymbol({
type: "simple-line", // autocasts as new SimpleLineSymbol()
color: "lightblue",
width: "2px",
style: "short-dot"
});
//面样式
var polygonSymbol = new SimpleFillSymbol({
color: [255, 0, 0, 0.5]
});
//弹出层 点
var popupPointTemplate = {
title: "{名称}",
content: "<b>名称:</b> {名称}" + "<br> <b>地址:</b> {地址}"
};
//弹出层 线
var popupPolylineTemplate = {
title: "{名称}",
content: "<b>名称:</b> {JJXQMC}"
};
//弹出层 面
var popupPolygonTemplate = {
title: "{名称}",
content: "<b>名称:</b> {JJXQMC}"
};
//查询结果图层
var resultsLayer = new GraphicsLayer();
function compare(a, b) {
return a - b;
}
//渲染查询的结果
function renderResult(res) {
//清空上次查询
if (resultsLayer) {
resultsLayer.removeAll();
}
var featureSource = [];
var extentArrayX = [];
var extentArrayY = [];
var pt;
if (res.results && res.results.length > 0) {
for (var i = 0; i < res.results.length; i++) {
var featureType = res.results[i].feature.geometry.type;
var feature = res.results[i].feature;
if (featureType == "point") {
//点
feature.symbol = pointSymbol;
feature.popupTemplate = popupPointTemplate;
//注释的代码是求extent的
// extentArrayX.push(feature.geometry.x);
// extentArrayY.push(feature.geometry.y);
var x = res.results[i].feature.geometry.x;
var y = res.results[i].feature.geometry.y;
if (x > 100 && x < 120 && y > 20 && y < 30) {
pt = new Point({
latitude: y,
longitude: x
});
}
featureSource.push(feature);
}
else if (featureType == "polyline") {
//线
feature.symbol = polylineSymbol;
feature.popupTemplate = popupPolylineTemplate;
//注释的代码是求extent的
// extentArrayX.push(feature.geometry.extent.xmin);
// extentArrayX.push(feature.geometry.extent.xmax);
// extentArrayY.push(feature.geometry.extent.ymin);
// extentArrayY.push(feature.geometry.extent.ymax);
var x = res.results[i].feature.geometry.extent.xmax;
var y = res.results[i].feature.geometry.extent.ymax;
featureSource.push(feature);
} else if (featureType == "polygon") {
//面
feature.symbol = polygonSymbol;
feature.popupTemplate = popupPolygonTemplate;
//注释的代码是求extent的
// extentArrayX.push(feature.geometry.extent.xmin);
// extentArrayX.push(feature.geometry.extent.xmax);
// extentArrayY.push(feature.geometry.extent.ymin);
// extentArrayY.push(feature.geometry.extent.ymax);
// pt = new Point({
// latitude: res.results[i].feature.geometry.extent.xmax,
// longitude: res.results[i].feature.geometry.extent.ymax
// });
featureSource.push(feature);
}
}
//注释的代码是求extent的问题
// extentArrayX.sort(compare);
// extentArrayY.sort(compare);
// var result = [extentArrayX[0], extentArrayY[0], extentArrayX[extentArrayX.length - 1], extentArrayY[extentArrayY.length - 1]]
//缩放到图层
view.goTo({
target: pt,
zoom: 14
});
return featureSource; //本身就是一个FeatureLayer
} else {
return null
}
}
//缩放至图层
function zoomToLayer(result) {
console.log(result)
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="esri-widget" id="optionsDiv">
<h2>查询名称</h2>
<input type="text" class="esri-widget" id="stateName" value="云岩">
<button class="esri-widget" id="doSeach">查询</button>
<br />
</div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-2d_loadGeoJson.html 0 → 100644
View file @ cb7659f4
<!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/layers/MapImageLayer",
"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, MapImageLayer, Search, QueryTask, Query,
GraphicsLayer, SpatialReference,
VectorTileLayer, PictureMarkerSymbol) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
var tiandituBaseUrl = "http://{subDomain}.tianditu.gov.cn"; //天地图服务地址
var token = "174705aebfe31b79b3587279e211cb9a"; //天地图token
var highlight;
//矢量地图(球面墨卡托投影)
var tiledLayer = new WebTileLayer({
urlTemplate:
tiandituBaseUrl + "/vec_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + token,
subDomains:
["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
//矢量注记(球面墨卡托投影)
var tiledLayerAnno = new WebTileLayer({
urlTemplate:
tiandituBaseUrl + "/cva_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + token,
subDomains:
["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
// var map = new Map();
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, tiledLayerAnno],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
});
//json格式的地理数据
var url = "https://apaas.wodcloud.com/mapsamples/static/data/JZD_CGCS2000_GK_108_3.json"
// var url = "../../data/JZD_CGCS2000_BEIDOU.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 imgaeURL = require("../../../static/images/marker-yellow.png");
// var symbol = new PictureMarkerSymbol(imgaeURL,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
});
//叠加要查询的图层
//查询图层的地址
mapserverUrl = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer";
var mapLayer = new MapImageLayer({
url: mapserverUrl
});
var map = new Map({
basemap: tdtBasemap,
layers: [footprintlayer]
});
//arcgisserver的View
var view = new MapView({
container: "viewDiv",
map: map,
center: [106.720725933, 26.5453458492],
scale: 144285.93411071779
});
// 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>
\ No newline at end of file
static/view/demo/page-2d_loadGeometry.html 0 → 100644
View file @ cb7659f4
<!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/mapsamples/static/js/shp.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"dojo/dom",
"esri/Map",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/layers/MapImageLayer",
"esri/layers/GeoJSONLayer",
"esri/geometry/SpatialReference",
"esri/widgets/DistanceMeasurement2D",
"esri/widgets/AreaMeasurement2D",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/Polygon",
"esri/geometry/Polyline",
"esri/geometry/Multipoint",
"esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dojo/domReady!"
], function (dom, Map, MapView, WebTileLayer, TileInfo, MapImageLayer, GeoJSONLayer, SpatialReference, DistanceMeasurement2D, AreaMeasurement2D, Graphic, GraphicsLayer, Polygon, Polyline, Multipoint, Point, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol) {
var tileInfo = new TileInfo({
"dpi": 96,
"format": "image/png",
"compressionQuality": 0,
"spatialReference": new SpatialReference(4326),
"rows": 256,
"cols": 256,
"origin": {
"x": -180,
"y": 90
},
"lods": [
{ "level": "0", "scale": 295829355.45, "resolution": 0.703125 },
{ "level": "1", "scale": 147914677.725, "resolution": 0.3515625 },
{ "level": "2", "scale": 73957338.8625, "resolution": 0.17578125 },
{ "level": "3", "scale": 36978669.43125, "resolution": 0.087890625 },
{ "level": "4", "scale": 18489334.715625, "resolution": 0.0439453125 },
{ "level": "5", "scale": 9244667.3578125, "resolution": 0.02197265625 },
{ "level": "6", "scale": 4622333.67890625, "resolution": 0.010986328125 },
{ "level": "7", "scale": 2311166.83945312, "resolution": 0.0054931640625 },
{ "level": "8", "scale": 1155583.41972656, "resolution": 0.00274658203125 },
{ "level": "9", "scale": 577791.709863281, "resolution": 0.001373291015625 },
{ "level": "10", "scale": 288895.8549316406, "resolution": 6.866455078125E-4 },
{ "level": "11", "scale": 144447.9274658203, "resolution": 3.4332275390625E-4 },
{ "level": "12", "scale": 4508.935440959931, "resolution": 1.71661376953125E-4 },
{ "level": "13", "scale": 36111.98186645508, "resolution": 8.58306884765625E-5 },
{ "level": "14", "scale": 18055.99093322754, "resolution": 4.291534423828125E-5 },
{ "level": "15", "scale": 9027.99546661377, "resolution": 2.1457672119140625E-5 },
{ "level": "16", "scale": 4513.997733306885, "resolution": 1.0728836059570312E-5 },
{ "level": "17", "scale": 2256.9988666534423, "resolution": 5.364418029785156E-6 },
{ "level": "18", "scale": 1128.4994333267211, "resolution": 2.682209014892578E-6 },
{ "level": "19", "scale": 564.2497166633606, "resolution": 1.341104507446289E-6 }
]
});
var layer = new WebTileLayer(
{
// urlTemplate:"http://jgsw.gy.wodcloud.com/iserver/services/map-guizhou/wmts-china/guizhou/default/ChinaPublicServices_guizhou/{level}/{row}/{col}.png",
urlTemplate: "http://jgsw.gy.wodcloud.com/iserver/services/map-guizhou/wmts-china?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=guizhou&STYLE=default&FORMAT=image/png&TILEMATRIXSET=ChinaPublicServices_guizhou&tileMatrix={level}&tileRow={row}&tileCol={col}",
tileInfo: tileInfo,
spatialReference: new SpatialReference(4326),
}
);
//geojson的格式数据
const url =
"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";
const template = {
title: "Earthquake Info",
content: "Magnitude {mag} {type} hit {place} on {time}",
fieldInfos: [
{
fieldName: "time",
format: {
dateFormat: "short-date-short-time"
}
}
]
};
const renderer = {
type: "simple",
field: "mag",
symbol: {
type: "simple-marker",
color: "orange",
outline: {
color: "white"
}
},
visualVariables: [
{
type: "size",
field: "mag",
stops: [
{
value: 2.5,
size: "2px"
},
{
value: 8,
size: "30px"
}
]
}
]
};
const geojsonLayer = new GeoJSONLayer({
url: url,
copyright: "USGS Earthquakes",
popupTemplate: template,
renderer: renderer //optional
});
// 创建地图
// var map = new Map({ layers: [geojsonLayer] });
var map = new Map();
map.add(layer);
// 创建二维地图
var view = new MapView({
container: "viewDiv",
map: map,
center: [106.72, 26.585],
zoom: 10,
});
// var ml = new MapImageLayer({
// url: "http://apaasgis-zw.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer",
// spatialReference: new SpatialReference(4326),
// })
//map.add(ml);
var measurementWidget = new DistanceMeasurement2D({
view: view
});
view.ui.add(measurementWidget, "top-right");
var importGeometry = dom.byId("importGeometry");
view.ui.add(importGeometry, "bottom-right");
//文件的读取与写入
var importFile = dom.byId("import");
var files = dom.byId("files");
importFile.addEventListener("click", function (e) {
files.click();
})
files.addEventListener("change", function (e) {
readFile();
})
function readFile() {
console.log("进入文件上传方法");
var selectedFile = document.getElementById("files").files[0];//获取读取的File对象
var windowURL = window.URL || window.webkitURL;
var dataURL = windowURL.createObjectURL(selectedFile);
//验证所传入的文件格式
var type = selectedFile.type;
var name = selectedFile.name;//读取选中文件的文件名
var size = selectedFile.size;//读取选中文件的大小
console.log("文件名:" + name + "大小：" + size);
var reader = new FileReader();
if (type == "application/json" || type == "application/kml") {
reader.readAsText(selectedFile);//读取文件的内容
reader.onload = function () {
console.log(this.result);//当读取完成之后会回调这个函数，然后此时文件的内容存储到了result中。直接操作即可。
switch (type) {
case "application/json":
var dataType = JSON.parse(this.result).features[0].geometry.type;
parseGeoJSON(dataURL, dataType)
break;
case "application/kml":
var dataType = JSON.parse(this.result).features[0].geometry.type;
parseKML(dataURL, dataType)
break;
default:
break
}
};
} else if (type == "application/x-zip-compressed") {
reader.readAsArrayBuffer(selectedFile);
reader.onload = function () {
console.log(this.result);//当读取完成之后会回调这个函数，然后此时文件的内容存储到了result中。直接操作即可。
shp(this.result).then(
function (data) {
console.log("输出shapefile");
console.log(data)
//var shapefileURL = windowURL.createObjectURL(selectedFile);
parseShapefile(data);
//parseShapefile(data)
}).catch(function (e) {
console.log(e);
});
};
} else {
alert("请导入符合规范的文件,后缀为.json/.geojson/.zip,(.zip是shapefile的压缩文件)");
}
};
//返回样式
function returnGeoType(geotype) {
switch (geotype) {
case "Point":
return {
type: "simple",
symbol: {
type: "simple-marker",
size: 6,
color: "green",
outline: {
width: 0.5,
color: "white"
}
}
};
break;
case "LineString":
return {
type: "simple",
symbol: {
type: "simple-line",
color: [255, 0, 0, 1],
outline: {
width: 2,
color: "blue"
}
}
};
break;
case "Polygon":
return {
type: "simple",
symbol: {
type: "simple-fill",
color: [255, 128, 0, 0.4],
outline: {
width: 1,
color: "blue"
}
}
};
break;
default:
break
}
}
//解析geoJSON
function parseGeoJSON(dataURL, dataType) {
var geojsonLayer = new GeoJSONLayer({
url: dataURL,
//data: JSON.parse(dataURL),
copyright: "customGeoJSON",
//popupTemplate: template,
renderer: returnGeoType(dataType) //optional
});
console.log(geojsonLayer);
map.add(geojsonLayer);
}
function parseKML() {
}
var graphiceLayer = new GraphicsLayer();
function parseShapefile(data) {
if (graphiceLayer) {
graphiceLayer.removeAll();
}
var features = data.features;
var featureType = data.features[0].geometry.type;
//点样式
var pointSymbol = new SimpleMarkerSymbol({
style: "circle",
color: "red",
size: "10"
});
//线样式
var polylineSymbol = new SimpleLineSymbol({
type: "simple-line", // autocasts as new SimpleLineSymbol()
color: "blue",
width: "2px",
style: "short-dot"
});
//面样式
var polygonSymbol = new SimpleFillSymbol({
color: [51, 51, 204, 1],
})
//需要上传一个shapefile的压缩文件
//先得到上传的数据类型
switch (featureType) {
case "Point":
var points = [];
//var ring = [];
for (var i = 0; i < features.length; i++) {
points.push(features[i].geometry.coordinates);
}
var multipoint = new Multipoint({
hasZ: false,
hasM: false,
points: points,
});
var graphic = new Graphic({
geometry: multipoint,
symbol: pointSymbol,
});
view.graphics.add(graphic);
break;
case "LineString":
var paths = [];
//var ring = [];
for (var i = 0; i < features.length; i++) {
paths.push(features[i].geometry.coordinates);
}
var polyline = new Polyline({
hasZ: false,
hasM: false,
paths: paths,
//spatialReference: { wkid: 4326 }
});
var graphic = new Graphic({
geometry: polyline,
symbol: polylineSymbol,
});
view.graphics.add(graphic);
break;
case "Polygon":
var rings = [];
for (var i = 0; i < features.length; i++) {
rings.push(features[i].geometry.coordinates[0]);
}
var polygon = new Polygon({
hasZ: false,
hasM: false,
rings: rings,
//spatialReference: { wkid: 4326 }
});
var graphic = new Graphic({
geometry: polygon,
symbol: polygonSymbol,
});
view.graphics.add(graphic);
break;
default:
break
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="importGeometry">
<input type="file" id="files" style="display:none" />
<input type="button" id="import" value="导入文件(支持geoJSON/shapefile)" />
</div>
<div>
<div>天地图</div>
<div>高德</div>
<div>超图</div>
</div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-2d_loadjson.html 0 → 100644
View file @ cb7659f4
<!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 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>QueryTask</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#optionsDiv {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: baseline;
align-content: center;
background-color: dimgray;
color: white;
padding: 10px;
width: 200px;
}
#printResults{
width: 200px
}
.esri-popup .esri-popup-header .esri-title {
font-size: 18px;
font-weight: bolder;
}
.esri-popup .esri-popup-body .esri-popup-content {
font-size: 14px;
}
</style>
<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="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/config/mapconfig.js"></script>
<script>
require([
"esri/Map",
"esri/Graphic",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/geometry/Point",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/geometry/SpatialReference",
"esri/layers/VectorTileLayer",
"esri/symbols/PictureMarkerSymbol",
"esri/tasks/QueryTask",
"esri/tasks/support/Query"
], function (Map, Graphic, Basemap, MapView, WebTileLayer, TileInfo, Point, FeatureLayer, GraphicsLayer,
SpatialReference, VectorTileLayer,
PictureMarkerSymbol, QueryTask, Query) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
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 popupTemplate = {
title: "{province}, {st_name} 站",
fieldInfos: [{
fieldName: "st_name",
label: "站点名称",
format: {
places: 0,
digitSeperator: true
}
}],
content: "</b> 站点 {st_name} 位于 {province} 省/直辖市" +
"<br><b>传感器高度:</b> {ele}" +
"<br><b>海拔高度:</b> {ele}" +
"</b> 经度：{lon} 纬度：{lat} "
};
var stationUrl = "https://geoserver.deekong.com/arcgis/rest/services/weather_station_wmo/FeatureServer/0"
//声明查询结果图层和目标要素图层
var resultsLayer = new GraphicsLayer();
var weatherstation = new FeatureLayer({
url: stationUrl
});
//创建查询
var qTask = new QueryTask({
url: stationUrl
});
//设置查询参数，是否返回几何数据、返回字段数组
var params = new Query({
returnGeometry: true,
outFields: ["*"]
});
//构建地图数据
var map = new Map({
basemap: tdtBasemap,
layers: [weatherstation, resultsLayer]
});
//显示地图
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 6,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [109, 38],
popup: {
dockEnabled: true,
dockOptions: {
position: "top-right",
breakpoint: false
}
}
});
//地图数据加载完成
view.when(function () {
view.ui.add("optionsDiv", "bottom-right");
//按钮点击监听事件，执行查询
document.getElementById("doBtn").addEventListener("click", doQuery);
});
var st_name = document.getElementById("st_name");
var province = document.getElementById("valSelect");
//查询事件
function doQuery() {
//清楚之前查询结果
resultsLayer.removeAll();
//设置查询条件，与数据库查询SQL语句类似
params.where = "province='" + province.value + "'";
qTask
.execute(params)
.then(getResults)
.catch(promiseRejected);
}
// 查询完成处理返回结果
function getResults(response) {
var peakResults = response.features.map(function (feature) {
var pt = new Point({
"x": feature.geometry.longitude,
"y": feature.geometry.latitude,
"spatialReference": new SpatialReference(4326)
});
var symbol = new PictureMarkerSymbol("/images/marker-red.png", 26, 37);
var attr = {
"st_name": feature.attributes.st_name,
"province": feature.attributes.province,
"ele": feature.attributes.ele,
"lat": feature.attributes.lat,
"lon": feature.attributes.lon
};
var graphic = new Graphic(pt, symbol, attr);
graphic.popupTemplate = popupTemplate;
return graphic;
});
//将结果添加到图层
resultsLayer.addMany(peakResults);
//移动地图到结果处
view.goTo(peakResults).then(function () {
view.popup.open({
features: peakResults,
featureMenuOpen: true,
updateLocationEnabled: true
});
});
document.getElementById("printResults").innerHTML =
"共查询到" + peakResults.length + "个对象";
}
function promiseRejected(error) {
console.error("Promise rejected: ", error.message);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="esri-widget" id="optionsDiv">
<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><br>
<button class="esri-widget" id="doBtn">检索</button> <br />
<span id="printResults"></span>
</div>
</body>
</html>
static/view/demo/page-2d_queryStatistic.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>框选查询统计数据--4.x</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>
<scrip src="https://apaas.wodcloud.com/mapsamples/static/js/echarts.min.js">
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.mycharts {
background: #fff;
width: 400px;
position: absolute;
top: 0px;
right: 0px;
overflow-y: auto;
box-shadow: 0px 2px 20px -5px #1b8cf2;
}
.mycharts .chart_pie {
width: 400px;
height: 180px;
}
.mycharts .chart_type {
width: 400px;
height: 180px;
}
h3 {
margin: 0 0 5px 0;
border-bottom: 1px solid #444;
}
.label {
display: inline-block;
width: 140px;
}
</style>
<script>
require([
"dojo/promise/Promise",
"dojo/promise/all",
"dojo/on",
"esri/layers/WebTileLayer",
"esri/Map",
"esri/layers/MapImageLayer",
"esri/layers/FeatureLayer",
'esri/views/MapView',
"esri/Basemap",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/tasks/FindTask",
"esri/tasks/support/FindParameters",
"esri/views/draw/Draw",
"esri/symbols/SimpleLineSymbol",
"esri/Color",
"esri/widgets/Sketch/SketchViewModel",
"https://apaas.wodcloud.com/mapsamples/static/js/echarts.min.js",
"dojo/dom"
], function (Promise, All, on, WebTileLayer, Map, MapImageLayer, FeatureLayer, MapView, Basemap, SimpleMarkerSymbol, SimpleFillSymbol, GraphicsLayer, Graphic, QueryTask, Query, FindTask, FindParameters, Draw, SimpleLineSymbol, Color, SketchViewModel, echarts, dom) {
var tiandituBaseUrl = "http://{subDomain}.tianditu.gov.cn"; //天地图服务地址
var token = "174705aebfe31b79b3587279e211cb9a"; //天地图token
var highlight;
//矢量地图(球面墨卡托投影)
var tiledLayer = new WebTileLayer({
urlTemplate:
tiandituBaseUrl + "/vec_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + token,
subDomains:
["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
//矢量注记(球面墨卡托投影)
var tiledLayerAnno = new WebTileLayer({
urlTemplate:
tiandituBaseUrl + "/cva_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" + token,
subDomains:
["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
// var map = new Map();
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, tiledLayerAnno],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
});
//叠加要查询的图层
//查询图层的地址
mapserverUrl = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer";
var mapLayer = new MapImageLayer({
url: mapserverUrl
});
var map = new Map({
basemap: tdtBasemap,
layers: [mapLayer]
});
//arcgisserver的View
var view = new MapView({
container: "viewDiv",
map: map,
center: [106.720725933, 26.5453458492],
scale: 144285.93411071779
});
polygonGraphicsLayer = new GraphicsLayer();
map.add(polygonGraphicsLayer);
//创建一个画草图的实例
sketchViewModel = new SketchViewModel({
view: view,
layer: polygonGraphicsLayer,
pointSymbol: {
type: "simple-marker",
color: [255, 255, 0, 0],
size: "1px",
outline: {
color: "gray",
width: 0
}
}
});
on(dom.byId("Extent"), "click", function (evt) {
// clearUpSelection();
// view.popup.close();
// ready to draw a polygon
sketchViewModel.create("polygon");
sketchViewModel.on("create", function (event) {
if (event.state === "complete") {
console.log("绘制完成");//tag--这个完成的次数？
polygonGraphicsLayer.remove(event.graphic);
selectFeatures(event.graphic.geometry);
}
});
});
function selectFeatures(geometry, callBack) {
//查询数据 (findTask不能做空间分析，所以多图层的空间叠加分析只能用query)
var searchLayerURL_1 = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/1";
//var searchLayerURLOne = "https://apaasgis.wodcloud.com/server/rest/services/GZ_APAASZTT/FeatureServer";
var searchLayer_1 = new FeatureLayer({
title: "公安机构",
url: searchLayerURL_1
});
var searchLayerURL_2 = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/2";
var searchLayer_2 = new FeatureLayer({
title: "旅馆",
url: searchLayerURL_2
});
var searchLayerURL_3 = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/3";
var searchLayer_3 = new FeatureLayer({
title: "网吧终端",
url: searchLayerURL_3
});
var searchLayerURL_4 = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/10";
var searchLayer_4 = new FeatureLayer({
title: "交警辖区",
url: searchLayerURL_4
});
var searchLayerURL_5 = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/11";
var searchLayer_5 = new FeatureLayer({
title: "派出所辖区",
url: searchLayerURL_5
});
var searchLayerURL_6 = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/12";
var searchLayer_6 = new FeatureLayer({
title: "分局辖区",
url: searchLayerURL_6
});
var searchLayerURL_7 = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/13";
var searchLayer_7 = new FeatureLayer({
title: "市局辖区",
url: searchLayerURL_7
});
view.graphics.removeAll();
//分别查询
var result = [];
var searchLayer = [searchLayer_1, searchLayer_2, searchLayer_3, searchLayer_4, searchLayer_5, searchLayer_6, searchLayer_7];
var resultArray = doSearch(searchLayer, geometry);
};
//将结果渲染
function renderResult(resultArray) {
console.log("进入render方法");
var resultDataEcharts = [];
var resultDataGov = [];
if (resultArray.length > 0) {
var pointArrayLength = 0;
var polygonArrayLength = 0;
var polylineArrayLength = 0;
for (var i = 0; i < resultArray.length; i++) {
var searchDataGov = { "name": "", "value": 0 };
var graphic = resultArray[i].features;
if (graphic.length > 0) {
searchDataGov.value = graphic.length;
searchDataGov.name = resultArray[i].title;
resultDataGov.push(searchDataGov);
if (graphic[0].geometry.type == "point") {
pointArrayLength += graphic.length;
for (var j = 0; j < graphic.length; j++) {
var pointSymbol = new SimpleMarkerSymbol({
style: "circle",
color: "blue",
size: "10"
});
var pointGraphic = new Graphic({
geometry: graphic[j].geometry,
symbol: pointSymbol,
//attributes: polylineAtt
});
view.graphics.add(pointGraphic);
}
} else if (graphic[0].geometry.type == "polygon") {
polygonArrayLength += graphic.length;
for (var j = 0; j < graphic.length; j++) {
var polygonSymbol = new SimpleFillSymbol({
color: [255, 24, 0, 0.2]
});
var polygonGraphic = new Graphic({
geometry: graphic[j].geometry,
symbol: polygonSymbol,
//attributes: polylineAtt
});
view.graphics.add(polygonGraphic);
}
} else if (graphic[0].geometry.type == "polyline") {
polylineArrayLength += graphic.length;
for (var j = 0; j < graphic.length; j++) {
var polylineSymbol = new SimpleLineSymbol({
type: "simple-line", // autocasts as new SimpleLineSymbol()
color: "lightblue",
width: "2px",
style: "short-dot"
});
var polylineGraphic = new Graphic({
geometry: graphic[j].geometry,
symbol: polylineSymbol,
//attributes: polylineAtt
});
view.graphics.add(polylineGraphic);
}
}
}
}
var resultDtaType = [{ "name": "点", "value": pointArrayLength }, { "name": "线", "value": polylineArrayLength }, { "name": "面", "value": polygonArrayLength }];
initEChartPie(resultDataGov, resultDtaType);
}
};
//查询出结果
function doSearch(searchLayers, geometry) {
var echartsData = [];
var searchRequest = [];
const query = {
geometry: geometry,
outFields: ["*"],
returnGeometry: true
};
if (searchLayers.length > 0) {
for (var i = 0; i < searchLayers.length; i++) {
echartsData.push(searchLayers[i].title);
searchRequest.push(searchLayers[i].queryFeatures(query));
}
}
All(searchRequest).then(res => {
if (res.length > 0) {
for (var i = 0; i < res.length; i++) {
res[i].title = echartsData[i];
// var highlight;
// view.whenLayerView(searchLayers[i].source.layer).then(function (layerView) {
// if (highlight) {
// highlight.remove();
// }
// highlight = layerView.highlight(res[i].features);
// }).catch(function (error) {
// console.log("打出错误");
// console.log(error);
// });
}
//渲染结果
renderResult(res);
}
});
//移到查询的位置
view.goTo(geometry.extent.expand(2));
}
function errorCallback(error) {
console.log("error:", error);
}
function clearUpSelection() {
view.graphics.removeAll();
grid.clearSelection();
};
//初始化echarts表
function initEChartPie(dataGov, dataType) {
console.log("进入echarts方法111");
var chart_pie_gov = echarts.init(document.getElementById("chart_pie"));
var chart_pie_type = echarts.init(document.getElementById("chart_type"));
var option_gov = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [
{
name: '查询结果统计',
type: 'pie',
radius: ['50%', '70%'],
label: {
normal: {
show: true,
formatter: "{b}:{c} \n {d}%"
}
},
data: dataGov
}
]
};
var option_type = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [
{
name: '查询结果统计',
type: 'pie',
radius: ['50%', '70%'],
label: {
normal: {
show: true,
formatter: "{b}:{c} \n {d}%"
}
},
data: dataType
}
]
}
chart_pie_gov.setOption(option_gov);
chart_pie_type.setOption(option_type);
};
});
</script>
</head>
<body>
<div id="viewDiv">
</div>
<div class="mycharts" id="mycharts">
<div id="controls">
<button id="Extent">画多边形进行查询统计</button>
</div>
<div class="chart_pie" id="chart_pie"></div>
<div class="chart_type" id="chart_type"></div>
</div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-2d_videoView.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<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">
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-view-width-xlarge .esri-popup__main-container {
width: 505px;
}
.esri-view-height-xlarge .esri-popup__main-container {
max-height: none;
}
.esri-popup__main-container {
max-height: none;
}
</style>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/config",
"esri/views/MapView",
"esri/WebMap"
], function (esriConfig, MapView, WebMap) {
esriConfig.portalUrl = "https://apaasgis.wodcloud.com/arcgis";
var webmap = new WebMap({
portalItem: {
id: "54a708b3890a4d1aaff37988697aeaec"
}
});
var view = new MapView({
map: webmap,
container: "viewDiv"
});
view.when(function () {
view.popup.watch("selectedFeature", function (graphic) {
if (graphic && graphic.sourceLayer) {
var layerName = graphic.sourceLayer.title;
switch (layerName) {
case "视频监控点":
var name = graphic.attributes.NAME;
var code = graphic.attributes.CODE;
view.popup.open({
title: name + "(" + code + ")",
content: setContentInfo(code),
location: graphic.geometry
});
break;
case "储备库":
break;
}
}
});
});
function setContentInfo(code) {
console.log(code);
return "<div><video controls width='420'><source src='http://dl.wodcloud.com/video/" + code + ".mp4' type='video/mp4'></source></video></div>";
};
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-2dto3d.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Switch view from 2D to 3D - 4.12</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%;
}
#infoDiv {
position: absolute;
top: 15px;
left: 60px;
}
#infoDiv input {
border: none;
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
}
</style>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/config",
"esri/layers/WebTileLayer",
"esri/Map",
"esri/views/MapView",
"esri/views/SceneView",
"dojo/domReady!"
], function (ESRICONFIG, WebTileLayer, Map, MapView, SceneView) {
// 通过瓦片形式加载天地图
// 天地图根据投影分为两种：墨卡托和经纬度，在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"
);
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"
});
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;
appConfig.mapView.container = appConfig.container;
appConfig.activeView = appConfig.mapView;
switchButton.value = "3D";
} else {
//如果是2D视图，就将其转换为3D视图
appConfig.sceneView.viewpoint = activeViewpoint;
appConfig.sceneView.container = appConfig.container;
appConfig.activeView = appConfig.sceneView;
switchButton.value = "2D";
}
}
//创建2D和3D视图
function createView(params, type) {
var view;
var is2D = type === "2d";
if (is2D) {
view = new MapView(params);
return view;
} else {
view = new SceneView(params);
}
return view;
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="infoDiv">
<input class="esri-component esri-widget--button esri-widget esri-interactive" type="button" id="switch-btn"
value="3D" />
</div>
</body>
</html>
static/view/demo/page-3.xmovelayer.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TDT WMTS Map</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_3.x/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<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>
let map, featureLayer, moveLayer, lineLayer, featureCollection, featureCollection2, selectedGraphics, linesymbol,
selectedLineGraphic, timer, movecounts;
require([
"esri/map",
"esri/layers/WebTiledLayer",
"esri/layers/TileInfo",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/dijit/PopupTemplate",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/graphic",
"dojo/_base/array",
"esri/tasks/query",
"esri/symbols/CartographicLineSymbol",
"esri/Color",
"dojo/domReady!"
], function (Map, WebTiledLayer, TileInfo, FeatureLayer, GraphicsLayer, PopupTemplate, Point, Polyline, Graphic,
array,
Query, CartographicLineSymbol, Color) {
// 创建地图，不设置底图，如果设置底图会造成坐标系无法被转换成 ESPG:4326 (WGS1984)
map = new Map('map', {
/*地图中心点*/
center: [0, 0],
/*地图默认缩放等级*/
zoom: 8,
/*地图最大缩放等级*/
maxZoom: 20,
/*地图最小缩放等级*/
minZoom: 2,
/*关闭缩放按钮*/
slider: false,
/*关闭logo*/
logo: false
});
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
var tileInfo = new TileInfo({
dpi: 90.71428571427429,
rows: 256,
cols: 256,
compressionQuality: 0,
origin: {
x: -180,
y: 90
},
spatialReference: {
wkid: 4326
},
lods: [{
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: 20,
resolution: 1.341104507446289075e-006,
scale: 563.616930119991375
}]
});
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
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
});
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
});
map.addLayer(basemap);
map.addLayer(annomap);
// 设定中心点以及缩放级别，使地图的坐标系修正为 ESPG:4326 (WGS1984),否则地图坐标系为 ESPG:102100 也就是 Web墨卡托 投影的坐标系
// 如果希望设置地图中心点，以及缩放级别，请在此处设置，在新建地图时给出的坐标可以随意，但请不要和此处相同
map.centerAndZoom(new Point({
x: 106.720725933,
y: 26.5453458492,
spatialReference: {
wkid: 4326
}
}), 8);
featureCollection = {
"layerDefinition": null,
"featureSet": {
"features": [],
"geometryType": "esriGeometryPoint"
}
};
featureCollection.layerDefinition = {
"geometryType": "esriGeometryPoint",
"objectIdField": "ObjectID",
"drawingInfo": {
"renderer": {
"type": "simple",
"symbol": {
"type": "esriPMS",
"url": "https://apaas.wodcloud.com/mapsamples/static/images/ic_wxhuoche.png",
"contentType": "image/png",
"width": 15,
"height": 15
}
}
},
"fields": [{
"name": "vehicle_number",
"alias": "vehicle_number",
"type": "esriFieldTypeString"
}, {
"name": "total_mileage",
"alias": "total_mileage",
"type": "esriFieldTypeString"
}, {
"name": "recorder_speed",
"alias": "recorder_speed",
"type": "esriFieldTypeString"
}]
};
featureCollection2 = {
"layerDefinition": null,
"features": [],
"geometryType": "esriGeometryPolyline"
};
linesymbol = new CartographicLineSymbol(
CartographicLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 10,
CartographicLineSymbol.CAP_ROUND,
CartographicLineSymbol.JOIN_MITER, 5
);
featureCollection2.layerDefinition = {
"geometryType": "esriGeometryPolyline",
"objectIdField": "ObjectID",
"fields": [{
"name": "ObjectID",
"alias": "ObjectID",
"type": "esriFieldTypeOID"
}, {
"name": "description",
"alias": "Description",
"type": "esriFieldTypeString"
}, ],
"drawingInfo": {
"renderer": {
"type": "simple",
"symbol": linesymbol
}
}
};
selectedLineGraphic = [];
var popupTemplate = new PopupTemplate({
title: "两客一危车辆",
description: "{vehicle_number}"
});
featureLayer = new FeatureLayer(featureCollection, {
id: 'flickrLayer',
infoTemplate: popupTemplate
});
moveLayer = new FeatureLayer(featureCollection, {
id: 'moveLayer',
infoTemplate: popupTemplate
});
lineLayer = new GraphicsLayer();
map.addLayers([featureLayer, moveLayer, lineLayer]);
// map.graphics.add(polylineGraphic);
$.get(
"https://apaas.wodcloud.com/mapsamples/static/data/mapLocation.json",
function (data) {
var features = [];
array.forEach(data.features, function (feature) {
var attr = {};
attr["vehicle_number"] = feature.properties.vehicle_number;
attr["total_mileage"] = feature.properties.total_mileage;
attr["recorder_speed"] = feature.properties.recorder_speed;
attr["direction"] = feature.properties.direction;
var geometry = new Point(feature.geometry.coordinates);
var graphic = new Graphic(geometry);
graphic.setAttributes(attr);
features.push(graphic);
});
featureLayer.applyEdits(features, null, null);
});
map.on("extent-change", function () {
if (timer) {
clearInterval(timer);
}
if (map.extent.xmax - map.extent.xmin > 0.5) {
featureLayer.show();
moveLayer.hide();
lineLayer.hide();
return
}
featureLayer.hide();
moveLayer.show();
lineLayer.show();
var query = new Query();
query.geometry = map.extent;
featureLayer.queryFeatures(query, selectInMap);
})
function selectInMap(response) {
var features = [];
console.log(response.features);
//深拷贝
array.forEach(response.features, function (feature) {
var attr = {};
attr["vehicle_number"] = feature.attributes.vehicle_number;
attr["direction"] = feature.attributes.direction;
var geometry = feature.geometry;
var graphic = new Graphic(geometry);
graphic.setAttributes(attr);
features.push(graphic);
});
// var features = response.features;
console.log(features);
map.removeLayer(moveLayer);
map.removeLayer(lineLayer);
moveLayer = new FeatureLayer(featureCollection, {
id: 'moveLayer',
infoTemplate: popupTemplate
});
lineLayer = new GraphicsLayer();
map.addLayer(moveLayer);
map.addLayer(lineLayer);
selectedGraphics = [];
selectedLineGraphic = [];
for (var i = 0; i < features.length; i++) {
feature = features[i];
if (map.extent.contains(feature.geometry)) {
selectedGraphics.push(feature);
var linegeometry = new Polyline({
"paths": [
[
[feature.geometry.x, feature.geometry.y],
]
],
"spatialReference": {
"wkid": 4326
}
})
var polylineGraphic = new Graphic(linegeometry, linesymbol);
selectedLineGraphic.push(polylineGraphic)
}
}
movecounts = 0;
if (timer) {
clearInterval(timer);
}
timer = setInterval(() => {
lineLayer.clear();
for (var i = 0; i < selectedGraphics.length; i++) {
var angle =
((2 * Math.PI) / 360) * selectedGraphics[i].attributes.direction;
if (movecounts == 50) {
selectedGraphics[i].geometry.x -= 0.025 * Math.sin(angle);
selectedGraphics[i].geometry.y -= 0.025 * Math.cos(angle);
selectedLineGraphic[i].geometry.paths[0] = selectedLineGraphic[i].geometry.paths[0].slice(0, 1);
} else {
selectedGraphics[i].geometry.x += 0.0005 * Math.sin(angle);
selectedGraphics[i].geometry.y += 0.0005 * Math.cos(angle);
selectedLineGraphic[i].geometry.paths[0].push([selectedGraphics[i].geometry.x, selectedGraphics[i]
.geometry.y
])
}
lineLayer.add(selectedLineGraphic[i])
}
lineLayer.redraw();
moveLayer.applyEdits(selectedGraphics, null, null);
if (movecounts == 50) {
movecounts = 0;
}
movecounts++;
}, 200);
}
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
static/view/demo/page-3d_base_map.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>3D Base Map</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/api_4.x/init.js"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/WebTileLayer",
"esri/config",
"esri/geometry/Point",
"dojo/domReady!"
], function (Map, SceneView, WebTileLayer, ESRICONFIG, Point) {
// 通过瓦片形式加载天地图
// 天地图根据投影分为两种：墨卡托和经纬度，在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"
);
var map = new Map({
ground: "world-elevation"
});
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({
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>
<body>
<div id="viewDiv"></div>
</body>
</html>
static/view/demo/page-3d_csvlayer.html 0 → 100644
View file @ cb7659f4
<!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>
<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/api_4.x/init.js"></script>
<script>
require([
"esri/config",
"esri/layers/WebTileLayer",
"esri/Map",
"esri/views/SceneView",
"esri/layers/CSVLayer",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color",
"dojo/domReady!"
], function (ESRICONFIG, WebTileLayer, Map, SceneView, CSVLayer, SimpleRenderer, SimpleMarkerSymbol, Color) {
// 通过瓦片形式加载天地图
// 天地图根据投影分为两种：墨卡托和经纬度，在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"
);
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}."
};
var csvLayer = new CSVLayer({
url: url,
copyright: "big-data",
popupTemplate: template,
elevationInfo: {
//在地球表面放置
mode: "on-the-ground"
}
});
csvLayer.renderer = {
type: "simple", //渲染的类型
symbol: {
type: "point-3d", //要素为3D点
symbolLayers: [{
type: "icon", // 符号类型为图标
material: {
color: [238, 69, 0, 0.75]
},
outline: {
width: 0.5,
color: "white"
},
size: "12px"
}]
}
};
var map = new Map({
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>
<body>
<div id="viewDiv"></div>
</body>
</html>
static/view/demo/page-arcgis_load_geoserver_wmts.html 0 → 100644
View file @ cb7659f4
<!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;
}
#switchBaseMap {
position: fixed;
width: 50px;
height: 50px;
top: 20px;
right: 90px;
}
#switchBaseMap img {
width: auto;
height: auto;
}
#diqiu {
display: none;
}
#ditu {
display: block;
}
</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",
"esri/layers/MapImageLayer",
"https://apaas.wodcloud.com/mapsamples/static/js/GaodeLayer.js",
"dojo/domReady!"
], function (Map, Basemap, MapView, WebTileLayer, TileInfo, MapImageLayer, GaodeLayer) {
var GaodeLayer = new GaodeLayer();
var tileInfo = new TileInfo({
rows: 256,
cols: 256,
compressionQuality: 0, //压缩像素值
origin: {
x: -180,
y: 90
},
spatialReference: {
wkid: 4326
},
lods: [ //定义平铺方案的细节级别数组
{
level: 0,
levelValue: 0,
resolution: 0.703125,
scale: 295497593.05875003
}, {
level: 1,
levelValue: 1,
resolution: 0.3515625,
scale: 147748796.52937502
}, {
level: 2,
levelValue: 2,
resolution: 0.17578125,
scale: 73874398.264687508
}, {
level: 3,
levelValue: 3,
resolution: 0.087890625,
scale: 36937199.132343754
}, {
level: 4,
levelValue: 4,
resolution: 0.0439453125,
scale: 18468599.566171877
}, {
level: 5,
levelValue: 5,
resolution: 0.02197265625,
scale: 9234299.7830859385
}, {
level: 6,
levelValue: 6,
resolution: 0.010986328125,
scale: 4617149.8915429693
}, {
level: 7,
levelValue: 7,
resolution: 0.0054931640625,
scale: 2308574.9457714846
}, {
level: 8,
levelValue: 8,
resolution: 0.00274658203125,
scale: 1154287.4728857423
}, {
level: 9,
levelValue: 9,
resolution: 0.001373291015625,
scale: 577143.73644287116
}, {
level: 10,
levelValue: 10,
resolution: 0.0006866455078125,
scale: 288571.86822143558
}, {
level: 11,
levelValue: 11,
resolution: 0.00034332275390625,
scale: 144285.93411071779
}, {
level: 12,
levelValue: 12,
resolution: 0.000171661376953125,
scale: 72142.967055358895
}, {
level: 13,
levelValue: 13,
resolution: 8.58306884765625e-005,
scale: 36071.483527679447
}, {
level: 14,
levelValue: 14,
resolution: 4.291534423828125e-005,
scale: 18035.741763839724
}, {
level: 15,
levelValue: 15,
resolution: 2.1457672119140625e-005,
scale: 9017.8708819198619
}, {
level: 16,
levelValue: 16,
resolution: 1.0728836059570313e-005,
scale: 4508.9354409599309
}, {
level: 17,
levelValue: 17,
resolution: 5.3644180297851563e-006,
scale: 2254.4677204799655
}, {
level: 18,
levelValue: 18,
resolution: 2.68220901489257815e-006,
scale: 1127.23386023998275
}
]
});
let layer = new WebTileLayer({
id: 'baseMapOne',
urlTemplate: 'http://218.19.252.203:20052/geoserver/gwc/service/wmts?SERVICE=WMTS&request=GetTile&version=1.0.0&LAYER=chanzhou%3Ajichutu&tileMatrixSet=EPSG:4326&TileMatrix=EPSG:4326:{level}&TileRow={row}&TileCol={col}&style=&format=image/png',
spatialReference: {
wkid: 4326
},
tileInfo: tileInfo
})
var layer1 = new MapImageLayer({
title: "深圳市控制点",
id: "controlMap",
url: "https://apaasgis.wodcloud.com/server/rest/services/SZ_POINT_TEST/MapServer",
sublayers: [
{
id: 0,
visible: true
}
]
});
// var tdtBasemap = new Basemap({
// baseLayers: [layer, layer1],
// title: "TDT Basemap",
// id: "tdtBasemap",
// spatialReference: {
// wkid: 4326
// },
// });
// var tdtBasemap2 = new Basemap({
// baseLayers: [GaodeLayer,layer1],
// title: "TDT Basemap",
// id: "tdtBasemap",
// spatialReference: {
// wkid: 3857
// },
// });
// // 创建地图
// var map = new Map({
// basemap: tdtBasemap2
// });
var map = new Map();
map.layers.addMany([GaodeLayer, layer1]);
// 创建二维地图
var view = new MapView({
map: map,
container: "viewDiv",
zoom: 12,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [114.05457, 22.54635]
//center:[3793128.792642,12738689.385894]
//center:new Point(114.05457, 22.54635, new SpatialReference({ wkid: 3857 }))
});
window.onload = function () {
function $(id) {
return document.getElementById(id);
}
//鼠标进
$("switchBaseMap").onmouseover = function () {
$("diqiu").style.display = "block";
$("ditu").style.display = "block";
}
//鼠标出
$("switchBaseMap").onmouseout = function () {
if ($("diqiu").style.display == "block") {
$("ditu").style.display = "none";
} else if ($("ditu").style.display == "block") {
$("diqiu").style.display = "none";
}
}
}
//点击ditu图标
document.getElementById("ditu").onclick = () => {
document.getElementById("ditu").style.display = "block";
document.getElementById("diqiu").style.display = "none";
map = new Map();
map.layers.addMany([GaodeLayer, layer1]);
// GaodeLayer.visible = false;
// layer.visible = true;
view = new MapView({
map: map,
container: "viewDiv",
zoom: 12,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [114.05457, 22.54635]
});
}
//点击diqiu图标
document.getElementById("diqiu").onclick = () => {
document.getElementById("ditu").style.display = "none";
document.getElementById("diqiu").style.display = "block";
map = new Map();
map.layers.addMany([layer, layer1]);
view = new MapView({
map: map,
container: "viewDiv",
zoom: 12,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [114.05457, 22.54635]
});
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="switchBaseMap">
<img id="diqiu" src="../../images/diqiu.png" />
<img id="ditu" src="../../images/ditu.png" />
</div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-basic_web_map.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Portal Web Map</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/api_4.x/init.js"></script>
<script>
require([
"esri/config",
"esri/views/MapView",
"esri/WebMap"
], function(esriConfig, MapView, WebMap) {
//使用portal门户的地图资源
esriConfig.portalUrl = "https://apaasgis.wodcloud.com/arcgis";
var webmap = new WebMap({
portalItem: {
id: "54a708b3890a4d1aaff37988697aeaec"
}
});
var view = new MapView({
map: webmap,
container: "viewDiv"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-buffer.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Query features from a FeatureLayer - 4.11</title>
<!-- Windows IIS 运行配置 -->
<!-- <script src="/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script src="/mapsamples/static/config/mapconfig.js"></script> -->
<!-- <script src="/api_4.x/init.js"></script> -->
<!-- <script src="https://js.arcgis.com/4.11/"></script> -->
<!-- <script src="/api_4.x/init.js"></script> -->
<!---------------------------------------------------------------->
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.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>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#infoDiv {
background-color: white;
color: black;
padding: 6px;
width: 400px;
}
#results {
font-weight: bolder;
}
</style>
<script>
require([
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/geometry/geometryEngine",
"esri/Graphic"
], function (
Map,
Basemap,
MapView,
WebTileLayer,
TileInfo,
FeatureLayer,
GraphicsLayer,
geometryEngine,
Graphic
) {
var footprintUrl = "https://geoserver.deekong.com/arcgis/rest/services/GA_TRACK_DEMO/FeatureServer/0";
var poiUrl = "https://geoserver.deekong.com/arcgis/rest/services/YJ_EXPOSION/FeatureServer/1";
var lineUrl = "https://geoserver.deekong.com/arcgis/rest/services/YJ_EXPOSION/FeatureServer/0"
var wellBuffer, wellsGeometries, magnitude;
var wellTypeSelect = document.getElementById("well-type");
var magSlider = document.getElementById("mag");
var distanceSlider = document.getElementById("distance");
var queryQuakes = document.getElementById("query-quakes");
var lineLayer = new FeatureLayer({
url: lineUrl,
outFields: ["*"],
visible: true
});
var poiLayer = new FeatureLayer({
url: poiUrl,
outFields: ["*"],
visible: true
});
var renderer = {
type: "simple",
symbol: {
type: "simple-marker",
outline: {
color: [128, 128, 128],
width: 0.5
}
},
};
var resultsLayer = new GraphicsLayer();
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,
layers: [lineLayer, poiLayer, resultsLayer]
});
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
center: [116.3, 40],
zoom: 11,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
}
});
view.when(function () {
var wellsGeometries;
lineLayer.queryFeatures().then(function (results) {
console.log(results);
wellsGeometries = results.features.map(function (feature) {
return feature.geometry;
});
return wellsGeometries;
});
})
.then(createBuffer(wellsGeometries))
function createBuffer() {
var bufferDistance = parseInt(1000);
console.log("buffer distance:" + bufferDistance);
console.log(wellsGeometries);
var wellBuffers = geometryEngine.buffer(
wellsGeometries,
[bufferDistance],
"meters",
true
);
wellBuffer = wellBuffers[0];
// add the buffer to the view as a graphic
var bufferGraphic = new Graphic({
geometry: wellBuffer,
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
outline: {
width: 1.5,
color: [255, 0, 0, 0.5]
},
style: "none"
}
});
view.graphics.removeAll();
view.graphics.add(bufferGraphic);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-bus_line.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>公交车路线</title>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.container {
display: flex;
height: 100%;
flex-direction: row;
}
.container>div {
flex: 1 1 auto;
width: 50%;
height: 100%;
}
</style>
<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/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script>
var map, view, option;
require([
"esri/Map",
"esri/Basemap",
"https://apaas.wodcloud.com/mapsamples/static/js/4EchartsLayer.js",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"dojo/domReady!"
], function (
Map, Basemap, echartsLayer, MapView, WebTileLayer, TileInfo
) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
let 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"]
});
let 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"]
});
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledlayer, annolayer],
title: "TDT Basemap",
id: "tdtBasemap",
});
// 创建地图
map = new Map({
basemap: tdtBasemap
});
//创建二维地图
view = new MapView({
map: map,
container: "map",
zoom: 10,
center: [116.3304, 39.8707]
});
$.get("https://apaas.wodcloud.com/mapsamples/static/data/lines-bus.json", function (data) {
var hStep = 300 / (data.length - 1);
var busLines = [].concat.apply([], data.map(function (busLine, idx) {
var prevPt;
var points = [];
for (var i = 0; i < busLine.length; i += 2) {
var pt = [busLine[i], busLine[i + 1]];
if (i > 0) {
pt = [
prevPt[0] + pt[0],
prevPt[1] + pt[1]
];
}
prevPt = pt;
points.push([pt[0] / 1e4, pt[1] / 1e4]);
}
return {
coords: points,
lineStyle: {
normal: {
color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
}
}
};
}))
option = {
series: [{
type: 'lines',
coordinateSystem: 'arcgis',
polyline: true,
data: busLines,
silent: true,
lineStyle: {
normal: {
// color: '#c23531',
// color: 'rgb(200, 35, 45)',
opacity: 0.2,
width: 1
}
},
progressiveThreshold: 500,
progressive: 200
}, {
type: 'lines',
coordinateSystem: 'arcgis',
polyline: true,
data: busLines,
lineStyle: {
normal: {
width: 0
}
},
effect: {
constantSpeed: 20,
show: true,
trailLength: 0.1,
symbolSize: 1.5
},
zlevel: 1
}]
}
var chart = new echartsLayer(view, echarts, option);
});
});
</script>
</head>
<body class="tundra">
<div class="container">
<div id="map"></div>
</div>
</body>
</html>
static/view/demo/page-echarts_web_map.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Portal Web Map</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%;
}
.mycharts {
background: #fff;
width: 400px;
position: absolute;
top: 0px;
right: 0px;
overflow-y: auto;
box-shadow: 0px 2px 20px -5px #1b8cf2;
}
.mycharts .chart_pie {
width: 400px;
height: 170px;
}
</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/js/echarts.min.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/config",
"esri/views/MapView",
"esri/WebMap"
], function (esriConfig, MapView, WebMap) {
esriConfig.portalUrl = "https://apaasgis.wodcloud.com/arcgis";
var webmap = new WebMap({
portalItem: {
id: "54a708b3890a4d1aaff37988697aeaec"
}
});
var view = new MapView({
map: webmap,
container: "viewDiv"
});
var echartsData = [
{ "value": 164, "name": "黔南州" },
{ "value": 160, "name": "贵阳" },
{ "value": 80, "name": "六盘水" },
{ "value": 255, "name": "遵义" },
{ "value": 125, "name": "安顺" },
{ "value": 201, "name": "毕节" },
{ "value": 168, "name": "铜仁" },
{ "value": 115, "name": "黔西南州" },
{ "value": 115, "name": "黔东南州" }
]
view.when(function () {
initEChartPie(echartsData);
});
function initEChartPie(data) {
var chart_pie = echarts.init(document.getElementById("chart_pie"));
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [
{
name: '摄像头数量',
type: 'pie',
radius: ['50%', '70%'],
label: {
normal: {
show: true,
formatter: "{b}:{c} \n {d}%"
}
},
data: data
}
]
};
chart_pie.setOption(option);
};
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="mycharts" id="mycharts">
<div class="chart_pie" id="chart_pie"></div>
</div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-editFeatures.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Edit features</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/api_4.x/init.js"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/MapImageLayer",
"esri/widgets/Editor"
], function(Map, MapView, FeatureLayer, MapImageLayer, Editor) {
//添加ArcGIS Server FeatureService服务，调用点层,所有数组字段
let point = new FeatureLayer({
url: "https://arcgisserver.wodcloud.com/arcgis/rest/services/GZ_FEATURE_EDITABLE/FeatureServer/0",
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
});
//添加ArcGIS Server FeatureService服务，调用线层,所有数组字段
let line = new FeatureLayer({
url: "https://arcgisserver.wodcloud.com/arcgis/rest/services/GZ_FEATURE_EDITABLE/FeatureServer/1",
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
});
//添加ArcGIS Server FeatureService服务，调用面层,所有数组字段
let polygon = new FeatureLayer({
url: "https://arcgisserver.wodcloud.com/arcgis/rest/services/GZ_FEATURE_EDITABLE/FeatureServer/2",
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
});
let mymap = new Map({
basemap: "topo",
layers: [point,line,polygon]
});
let myview = new MapView({
container: "viewDiv",
map: mymap,
center: [116.3, 39.9],
zoom: 9
});
let editor = new Editor({
view: myview,
layerInfos: [{
layer: point,line,polygon,
deleteEnabled: false
}],
});
// 在视图右上角添加小部件
myview.ui.add(editor, "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-featurelayer.html 0 → 100644
View file @ cb7659f4
<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>
require([
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/layers/FeatureLayer",
], function (Map, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
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
},
});
const map = new Map({
basemap: tdtBasemap
});
const view = new MapView({
map: map,
container: "sceneDiv",
spatialReference: {
wkid: 4326
},
zoom: 14,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [106.7, 26.5],
padding: {
right: 300
}
});
const listNode = document.getElementById("nyc_graphics");
const popupTemplate = {
title: "{NAME}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "ADRESS",
label: "地址",
format: {
places: 0,
digitSeparator: true
}
},{
fieldName: "SSQY",
label: "所属区域",
format: {
places: 0,
digitSeparator: true
}
}]
}]
};
const featureLayer = new FeatureLayer({
url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/3",
outFields: ["*"],
popupTemplate: popupTemplate,
});
map.add(featureLayer);
let graphics;
//加载完成要素图层
view.whenLayerView(featureLayer).then(function (layerView) {
layerView.watch("updating", function (value) {
if (!value) {
layerView
.queryFeatures({
geometry: view.extent,
returnGeometry: true
})
.then(function (results) {
graphics = results.features;
const fragment = document.createDocumentFragment();
graphics.forEach(function (result, index) {
const attributes = result.attributes;
const name = attributes.NAME;
const 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);
});
}
});
});
listNode.addEventListener("click", onListClickHandler);
function onListClickHandler(event) {
const target = event.target;
const resultId = target.getAttribute("data-result-id");
const result =
resultId && graphics && graphics[parseInt(resultId, 10)];
if (result) {
console.log(result)
view.goTo(result.geometry).then(function () {
view.popup.open({
features: [result],
location: result.geometry
});
});
}
}
});
</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>
</html>
static/view/demo/page-flareClusterLayer.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Flare Cluster Layer Example</title>
<link href="//fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: abel, Arial, Calibri;
overflow: hidden;
}
#container,
.view {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
.view.hidden {
position: absolute;
z-index: -10;
}
/* top menu */
#top-menu {
-webkit-box-shadow: 2px 3px 22px 0px rgba(173, 173, 173, 0.75);
-moz-box-shadow: 2px 3px 22px 0px rgba(173, 173, 173, 0.75);
box-shadow: 2px 3px 22px 0px rgba(173, 173, 173, 0.75);
position: absolute;
left: 10px;
top: 10px;
padding: 0 10px;
height: 45px;
width: auto;
background: rgba(46, 68, 94, 0.8);
z-index: 2001;
color: #FFF;
}
#top-menu .section {
display: inline-block;
height: 100%;
padding: 0 5px;
}
#top-menu .separator {
height: 100%;
width: 3px;
border-right: 1px solid #d0d0d0;
padding: 0;
}
#top-menu .button {
display: inline-block;
height: 100%;
color: #FFF;
margin: 0 5px;
background: none;
border: none;
cursor: pointer;
width: 85px;
padding: 0;
}
#top-menu .button.active {
font-weight: bold;
background: rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
}
#top-menu .button:focus {
outline: none;
}
#top-menu .button:hover {
opacity: 0.7;
transition: opacity 0.4s;
}
#top-menu select {
font-size: 1em;
height: 60%;
font-family: abel, Arial;
}
@media (min-width: 320px) and (max-width: 639px) {
#top-menu #title-text {
display: none;
}
#top-menu .button {
width: 75px;
margin: 0;
}
}
#api-link {
position: absolute;
bottom: 20px;
left: 10px;
font-weight: bold;
}
/* Set up some css rules to animate things */
/* Some rules to change the appearance of clusters and it's text when activated */
/* Scale up the clusters when activated */
.cluster-group.activated {
transform-origin: center;
transform: scale(1.2);
transition: transform linear 0.4s;
}
/* Change the appearance of clusters when activated */
.cluster-group.activated .cluster {
stroke: rgba(255, 255, 255, 1);
stroke-width: 2;
transition: all ease 1s;
}
.cluster-group.activated .cluster-text {
fill: #000;
font-weight: bold;
transition: all ease 1s;
}
/* hide flares by default */
.flare-group {
opacity: 0;
}
/* animate display of flares */
.flare-group.activated {
opacity: 1;
transition: opacity linear 0.06s;
}
/* this just chains the display of flares to occur one after the other using transition delay - could be a better way to do this natively but using SASS or LESS this would be much more concise */
.flare-group.activated:nth-of-type(1) {
transition-delay: 0.06s;
}
.flare-group.activated:nth-of-type(2) {
transition-delay: 0.12s;
}
.flare-group.activated:nth-of-type(3) {
transition-delay: 0.18s;
}
.flare-group.activated:nth-of-type(4) {
transition-delay: 0.24s;
}
.flare-group.activated:nth-of-type(5) {
transition-delay: 0.30s;
}
.flare-group.activated:nth-of-type(6) {
transition-delay: 0.36s;
}
.cluster-group .flare-group.activated:nth-of-type(7) {
transition-delay: 0.42s;
}
.flare-group.activated:nth-of-type(8) {
transition-delay: 0.48s;
}
/*
Cross browser notes on the example CSS animations:
IE/Edge: These POS's don't support transforms on svg elements using css, so the css transform animations won't work.
*/
</style>
<script>
var dojoConfig = {
async: true,
tlmSiblingOfDojo: false,
packages: [{
name: "fcl",
location: location.pathname.replace(/\/[^/]+$/, '') + "/fcl"
}],
has: {
"esri-promise-compatibility": 1 // enable native promises and remove the warning about using when() instead of then(). https://developers.arcgis.com/javascript/latest/guide/release-notes/index.html#improved-compatibility-with-javascript-promises
}
};
</script>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script src="https://js.arcgis.com/4.12/"></script>
<script type="text/javascript">
var map,
mapView,
sceneView,
activeView,
graphics,
clusterLayer;
//set some defaults
var maxSingleFlareCount = 8;
var areaDisplayMode = "activated";
require(["esri/Map",
"esri/Color",
"esri/Basemap",
"esri/config",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/views/SceneView",
"esri/geometry/Extent",
"esri/geometry/SpatialReference",
"esri/geometry/Point",
"esri/PopupTemplate",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/TextSymbol",
"esri/symbols/TextSymbol3DLayer",
"esri/symbols/Font",
"esri/renderers/ClassBreaksRenderer",
"esri/core/watchUtils",
"esri/geometry/support/webMercatorUtils",
"https://apaas.wodcloud.com/mapsamples/static/js/FlareClusterLayer_v4.js",
"dojo",
"dojo/ready",
"dojo/json",
"dojo/dom",
"dojo/on",
"dojo/dom-attr",
"dojo/dom-class",
"dojo/text!./data.json"
],
function (Map, Color, Basemap, ESRICONFIG, MapView, WebTileLayer, TileInfo, SceneView, Extent, SpatialReference,
Point,
PopupTemplate, GraphicsLayer,
Graphic, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, TextSymbol, TextSymbol3DLayer, Font,
ClassBreaksRenderer,
watchUtils, webMercatorUtils, fcl, dojo, ready, JSON, dom, on, domAttr, domClass, data) {
ready(function () {
var options;
// var url = "https://apaas.wodcloud.com/mapsamples/static/data/data.json"
// $.get(url, function (data) {
// console.log(data);
// setdata(response);
// });
// 通过瓦片形式加载天地图
// 天地图根据投影分为两种：墨卡托和经纬度，在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"
);
document.getElementById("area-mode").value = areaDisplayMode;
map = new Map();
map.layers.add(tiledLayer);
map.layers.add(annolayer);
mapView = new MapView({
map: map,
container: "views",
center: [133, -25],
zoom: 4,
ui: {
components: ["compass", "zoom"]
}
});
mapView.ui.move("zoom", "bottom-right");
mapView.ui.move("compass", "bottom-right");
// default map view to be active
activeView = mapView;
setActiveViewClasses(activeView);
sceneView = new SceneView({
map: map,
center: [133, -25],
zoom: 4,
ui: {
components: ["compass", "zoom"]
}
});
sceneView.ui.move("zoom", "bottom-right");
sceneView.ui.move("compass", "bottom-right");
//load up the dummy data
var allData = JSON.parse(data);
mapView.when(function (e) {
console.log('map view loaded');
if (activeView === mapView) {
initLayer(allData);
}
}, function (err) {
console.error("failed to load MapView " + e);
});
});
function initLayer(data) {
//init the layer, more options are available and explained in the cluster layer constructor
//set up a class breaks renderer to render different symbols based on the cluster count. Use the required clusterCount property to break on.
var defaultSym = new SimpleMarkerSymbol({
size: 6,
color: "#FF0000",
outline: null
});
var renderer = new ClassBreaksRenderer({
defaultSymbol: defaultSym
});
renderer.field = "clusterCount";
var smSymbol = new SimpleMarkerSymbol({
size: 22,
outline: new SimpleLineSymbol({
color: [221, 159, 34, 0.8]
}),
color: [255, 204, 102, 0.8]
});
var mdSymbol = new SimpleMarkerSymbol({
size: 24,
outline: new SimpleLineSymbol({
color: [82, 163, 204, 0.8]
}),
color: [102, 204, 255, 0.8]
});
var lgSymbol = new SimpleMarkerSymbol({
size: 28,
outline: new SimpleLineSymbol({
color: [41, 163, 41, 0.8]
}),
color: [51, 204, 51, 0.8]
});
var xlSymbol = new SimpleMarkerSymbol({
size: 32,
outline: new SimpleLineSymbol({
color: [200, 52, 59, 0.8]
}),
color: [250, 65, 74, 0.8]
});
renderer.addClassBreakInfo(0, 19, smSymbol);
renderer.addClassBreakInfo(20, 150, mdSymbol);
renderer.addClassBreakInfo(151, 1000, lgSymbol);
renderer.addClassBreakInfo(1001, Infinity, xlSymbol);
var areaRenderer;
// if area display mode is set. Create a renderer to display cluster areas. Use SimpleFillSymbols as the areas are polygons
var defaultAreaSym = new SimpleFillSymbol({
style: "solid",
color: [0, 0, 0, 0.2],
outline: new SimpleLineSymbol({
color: [0, 0, 0, 0.3]
})
});
areaRenderer = new ClassBreaksRenderer({
defaultSymbol: defaultAreaSym
});
areaRenderer.field = "clusterCount";
var smAreaSymbol = new SimpleFillSymbol({
color: [255, 204, 102, 0.4],
outline: new SimpleLineSymbol({
color: [221, 159, 34, 0.8],
style: "dash"
})
});
var mdAreaSymbol = new SimpleFillSymbol({
color: [102, 204, 255, 0.4],
outline: new SimpleLineSymbol({
color: [82, 163, 204, 0.8],
style: "dash"
})
});
var lgAreaSymbol = new SimpleFillSymbol({
color: [51, 204, 51, 0.4],
outline: new SimpleLineSymbol({
color: [41, 163, 41, 0.8],
style: "dash"
})
});
var xlAreaSymbol = new SimpleFillSymbol({
color: [250, 65, 74, 0.4],
outline: new SimpleLineSymbol({
color: [200, 52, 59, 0.8],
style: "dash"
})
});
areaRenderer.addClassBreakInfo(0, 19, smAreaSymbol);
areaRenderer.addClassBreakInfo(20, 150, mdAreaSymbol);
areaRenderer.addClassBreakInfo(151, 1000, lgAreaSymbol);
areaRenderer.addClassBreakInfo(1001, Infinity, xlAreaSymbol);
// Set up another class breaks renderer to style the flares individually
var flareRenderer = new ClassBreaksRenderer({
defaultSymbol: renderer.defaultSymbol
});
flareRenderer.field = "clusterCount";
var smFlareSymbol = new SimpleMarkerSymbol({
size: 14,
color: [255, 204, 102, 0.8],
outline: new SimpleLineSymbol({
color: [221, 159, 34, 0.8]
})
});
var mdFlareSymbol = new SimpleMarkerSymbol({
size: 14,
color: [102, 204, 255, 0.8],
outline: new SimpleLineSymbol({
color: [82, 163, 204, 0.8]
})
});
var lgFlareSymbol = new SimpleMarkerSymbol({
size: 14,
color: [51, 204, 51, 0.8],
outline: new SimpleLineSymbol({
color: [41, 163, 41, 0.8]
})
});
var xlFlareSymbol = new SimpleMarkerSymbol({
size: 14,
color: [250, 65, 74, 0.8],
outline: new SimpleLineSymbol({
color: [200, 52, 59, 0.8]
})
});
flareRenderer.addClassBreakInfo(0, 19, smFlareSymbol);
flareRenderer.addClassBreakInfo(20, 150, mdFlareSymbol);
flareRenderer.addClassBreakInfo(151, 1000, lgFlareSymbol);
flareRenderer.addClassBreakInfo(1001, Infinity, xlFlareSymbol);
// set up a popup template
var popupTemplate = new PopupTemplate({
title: "{name}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "facilityType",
label: "Facility Type",
visible: true
},
{
fieldName: "postcode",
label: "Post Code",
visible: true
},
{
fieldName: "isOpen",
label: "Opening Hours",
visible: true
}
]
}]
});
options = {
id: "flare-cluster-layer",
clusterRenderer: renderer,
areaRenderer: areaRenderer,
flareRenderer: flareRenderer,
singlePopupTemplate: popupTemplate,
spatialReference: new SpatialReference({
"wkid": 4326
}),
subTypeFlareProperty: "facilityType",
singleFlareTooltipProperty: "name",
displaySubTypeFlares: true,
maxSingleFlareCount: maxSingleFlareCount,
clusterRatio: 75,
clusterAreaDisplay: areaDisplayMode,
data: data
}
clusterLayer = new fcl.FlareClusterLayer(options);
map.add(clusterLayer);
clusterLayer.on("draw-complete", function () {
//console.log('draw complete event callback');
});
}
function clearLayer() {
map.remove(clusterLayer);
clusterLayer = null;
}
//setup some event handlers to react to change of options
on(dom.byId("map-view-select"), "click", function (evt) {
setActiveView(mapView);
});
on(dom.byId("scene-view-select"), "click", function (evt) {
setActiveView(sceneView);
});
on(dom.byId("area-mode"), "change", function (evt) {
clusterLayer.clusterAreaDisplay = this.value;
clusterLayer.draw();
});
function setdata(response) {
if (response.features) {
options.data = response.features;
} else {
alert("读取数据失败")
}
}
function setActiveView(view) {
if (view === activeView) return; // it's already active
var viewpoint = activeView.viewpoint.clone();
var container = activeView.container;
activeView.container = null;
if (view === mapView) {
mapView.viewpoint = viewpoint;
mapView.container = container;
mapView.rotation = 0;
activeView = mapView;
} else {
sceneView.viewpoint = viewpoint;
sceneView.container = container;
activeView = sceneView;
}
setActiveViewClasses(view);
activeView.when(() => {
//when switching views force a redraw
if (clusterLayer) {
clusterLayer.draw(view);
}
});
}
function setActiveViewClasses(view) {
if (view === mapView) {
domClass.add(dom.byId("map-view-select"), "active");
domClass.remove(dom.byId("scene-view-select"), "active");
} else {
domClass.add(dom.byId("scene-view-select"), "active");
domClass.remove(dom.byId("map-view-select"), "active");
}
}
});
</script>
</head>
<body>
<div id="container">
<div class="view" id="views">
</div>
<div id="top-menu">
<div class="section text">
<span id="title-text">Flare Cluster Layer - </span>API v4.12
</div>
<span class="separator"></span>
<div class="section">
<button id="map-view-select" class="button">Map View</button>
<button id="scene-view-select" class="button"> Scene View</button>
</div>
<span class="separator"></span>
<div class="section">
Area mode:
<select id="area-mode">
<option value="">None</option>
<option value="activated">Hover</option>
<option value="always">Always</option>
</select>
</div>
</div>
</div>
</body>
</html>
static/view/demo/page-fz_map.html 0 → 100644
View file @ cb7659f4
<!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 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>2D Base Map</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%;
}
.search-container {
float: right;
font-size: 15px
}
input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 34px;
border: none;
cursor: pointer;
}
.search-container button:hover {
background: #ccc;
}
@media screen and (max-width: 600px) {
.search-container {
float: none;
}
input[type=text],
.search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 10px;
}
input[type=text] {
border: 1px solid #ccc;
}
}
</style>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/Map",
"esri/Graphic",
"esri/Basemap",
"esri/geometry/Point",
"esri/views/MapView",
"esri/PopupTemplate",
"esri/layers/WebTileLayer",
"esri/layers/GraphicsLayer",
"esri/layers/MapImageLayer",
"esri/layers/support/TileInfo",
"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({
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}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
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", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
});
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", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
});
const tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
});
const map = new Map({
basemap: tdtBasemap
});
map.add(resultsLayer);
const view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 14,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [119.892731, 31.007534] //[119.8087, 30.9700]
});
view.ui.add(search, "top-right");
//when
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";
$.ajax({
url: url,
type: "GET",
success: function (result) {
if (result.success == 0) {
return;
}
result.geocodes.forEach(function (item) {
var coord = item.location.split(',').map(function (val) {
return parseFloat(val);
});
var ptPoi = new Point({
latitude: coord[1],
longitude: coord[0],
spatialReference: {
wkid: 4326
},
});
var warning_graphic = new Graphic({
geometry: ptPoi,
symbol: symbol_warning,
attributes:item,
popupTemplate: pupuptemp
});
resultsLayer.add(warning_graphic);
view.goTo(
{
target: ptPoi
},
{
duration: 2000,
easing: "in-out-expo"
}
);
console.log(coord);
});
},
error: function (error) {
console.log("error ${error}");
}
})
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="search">
<input type="text" placeholder="Search.." name="search" id="searchText">
<button id="searchBtn" type="submit">搜索</button>
</div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-geoserver_tms.html 0 → 100644
View file @ cb7659f4
<!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}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
let tileInfo2 = new TileInfo({
'dpi': 90.71428571427429, //解析度，即像素
// 'size': 256,
'rows': 256,
'cols': 256,
// 'format':"png",
'compressionQuality': 0,
'origin': {
'x': -180,
'y': 135.6
},
// 'fullExtent' : [113.3619204711914,22.15763153076172,115.14614852905273,23.1],
'spatialReference': {
'wkid': 4326
},
'lods': [{
'level': 0,
'resolution': 0.703125,
'scale': 279541132.0143589
},
{
'level': 1,
'resolution': 0.3515625,
'scale': 139770566.00717944
},
{
'level': 2,
'resolution': 0.17578125,
'scale': 69885283.00358972
},
{
'level': 3,
'resolution': 0.087890625,
'scale': 34942641.50179486
},
{
'level': 4,
'resolution': 0.0439453125,
'scale': 17471320.75089743
},
{
'level': 5,
'resolution': 0.02197265625,
'scale': 8735660.375448715
},
{
'level': 6,
'resolution': 0.010986328125,
'scale': 4367830.1877243575
},
{
'level': 7,
'resolution': 0.0054931640625,
'scale': 2183915.0938621787
},
{
'level': 8,
'resolution': 0.00274658203125,
'scale': 1091957.5469310894
},
{
'level': 9,
'resolution': 0.001373291015625,
'scale': 545978.7734655447
},
{
'level': 10,
'resolution': 0.0006866455078125,
'scale': 272989.38673277234
},
{
'level': 11,
'resolution': 0.00034332275390625,
'scale': 136494.69336638617
},
{
'level': 12,
'resolution': 0.000171661376953125,
'scale': 68247.34668319309
},
{
'level': 13,
'resolution': 8.58306884765625e-005,
'scale': 34123.67334159654
},
{
'level': 14,
'resolution': 4.291534423828125e-005,
'scale': 17061.83667079827
},
{
'level': 15,
'resolution': 2.1457672119140625e-005,
'scale': 8530.918335399136
},
{
'level': 16,
'resolution': 1.0728836059570313e-005,
'scale': 4265.459167699568
},
{
'level': 17,
'resolution': 5.364418029785156E-6,
'scale': 2132.729583849784
},
{
'level': 18,
'resolution': 2.682209014892578E-6,
'scale': 1066.364791924892
},
{
'level': 19,
'resolution': 1.341104507446289E-6,
'scale': 533.182395962446
},
{
'level': 20,
'resolution': 6.705522537231445E-7,
'scale': 266.591197981223
},
{
'level': 21,
'resolution': 3.3527612686157227E-7,
'scale': 133.2955989906115
}
]
})
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
},
});
let geoserverlayer0 = new WebTileLayer(
'http://218.19.252.203:20240/geoserver/gwc/service/tms/1.0.0/shenzhen%3Ashenzhenwgb@EPSG%3A4326@png/{level}/{col}/{row}.png', {
tileInfo: tileInfo2,
// fullExtent:[113.3619204711914,22.15763153076172,115.14614852905273,23.1]
})
// let geoserverlayer1 = new WebTileLayer(
// 'http://218.19.252.203:20240/geoserver/gwc/service/tms/1.0.0/shenzhen%3AWorkGridLayer@EPSG%3A4326@png/{level}/{col}/{row}.png', {
// tileInfo: tileInfo2
// })
// let geoserverlayer2 = new WebTileLayer(
// 'http://218.19.252.203:20240/geoserver/gwc/service/tms/1.0.0/shenzhen%3AWgbLoudong@EPSG%3A4326@png/{level}/{col}/{row}.png', {
// tileInfo: tileInfo2
// })
// 创建地图
var map = new Map({
// basemap: tdtBasemap,
//,geoserverlayer1,geoserverlayer2
layers: [geoserverlayer0]
});
// 创建二维地图
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 12,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [114.05457, 22.54635]
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
static/view/demo/page-heatmap.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Visualize points with a heatmap - 4.12</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<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>
var map, view;
require([
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/layers/FeatureLayer",
"esri/widgets/Legend",
"esri/widgets/LayerList",
"esri/renderers/smartMapping/creators/heatmap"
], function (Map, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer, Legend, LayerList,
heatmapRendererCreator) {
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
},
});
const template = {
title: "{place}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "TYPE",
label: "类型",
format: {
places: 0,
digitSeparator: true
}
},
{
fieldName: "ADDRESS",
label: "地址 ",
format: {
places: 0,
digitSeparator: true
}
},
]
}]
};
//热力图原理，热力图反映热力点对周围的影响程度，在地图上以像素为单位进行展示
//每个像素点上面的影响（权值）=每个热力点赋给它的影响的总和
//每个热力点的影响 = 热力点自身权重（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,
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>
static/view/demo/page-linebuffer.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>缓冲区分析</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#optionsDiv {
padding: 8px;
}
#info {
background-color: black;
opacity: 0.75;
color: red;
font-size: 18pt;
padding: 8px;
}
</style>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.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>
require([
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/Graphic",
"esri/widgets/Legend",
"esri/layers/GraphicsLayer",
"esri/geometry/geometryEngine",
"esri/layers/FeatureLayer",
"esri/symbols/PictureMarkerSymbol"
], function (Map, Basemap, MapView, WebTileLayer, TileInfo, QueryTask, Query, Graphic, Legend, GraphicsLayer, geometryEngine, FeatureLayer, 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 isBuffered = false;
var wellsGeometries;
var tunnelBuffers;
var wellTypeSelect = document.getElementById("well-type");
var distanceSlider = document.getElementById("distance");
var lineUrl = "https://geoserver.deekong.com/arcgis/rest/services/YJ_EXPOSION/FeatureServer/0"
var pointUrl = "https://geoserver.deekong.com/arcgis/rest/services/YJ_EXPOSION/FeatureServer/1"
var symbol_ranqichubei = new PictureMarkerSymbol("https://apaas.wodcloud.com/mapsamples/static/images/symbol-ranqichubei.jpg", 26, 26);
var symbol_ranqigongqi = new PictureMarkerSymbol("https://apaas.wodcloud.com/mapsamples/static/images/symbol-ranqigongqi.jpg", 26, 26);
var symbol_youku = new PictureMarkerSymbol("https://apaas.wodcloud.com/mapsamples/static/images/symbol-youku.jpg", 26, 26);
var symbol_youqizhan = new PictureMarkerSymbol("https://apaas.wodcloud.com/mapsamples/static/images/symbol-youqizhan.jpg", 26, 26);
var symbol_warning = new PictureMarkerSymbol("https://apaas.wodcloud.com/mapsamples/static/images/marker-red.png", 26, 37);
var symbol_yellow = new PictureMarkerSymbol("https://apaas.wodcloud.com/mapsamples/static/images/marker-yellow.png", 26, 37);
var warning_graphic;
const bldRenderer = {
//油库、加油加气站、燃气供气场站、燃气储备站
//化工厂
type: "unique-value",
legendOptions: {
title: "类型"
},
defaultSymbol: symbol_ranqichubei,
defaultLabel: "燃气储备站",
field: "type",
uniqueValueInfos: [
{
value: "燃气供气站",
symbol: symbol_ranqigongqi,
label: "燃气供气站"
},
{
value: "加油加气站",
symbol: symbol_youqizhan,
label: "加油加气站"
},
{
value: "油库",
symbol: symbol_youku,
label: "油库"
}
]
};
var template_bld = {
title: "{name}",
content: "{type}"
};
var template_warning = {
title:"预警信息",
content:"今日凌晨化工厂发生爆炸！化工厂附近有多条天然气管道，直径为1016mm的天然气管道可能成为风险源，请各方注意高度防范！"
}
const tunnelLayer = new FeatureLayer({
url: lineUrl,
outFields: ["*"],
visible: false
});
const buildinglayer = new FeatureLayer({
url: pointUrl,
renderer: bldRenderer,
outFields: ["*"],
popupTemplate: template_bld,
visible: false
});
var resultsLayer = new GraphicsLayer();
const map = new Map({
basemap: tdtBasemap,
layers: [tunnelLayer, buildinglayer, resultsLayer]
});
var qTask = new QueryTask({
url: lineUrl
});
var params = new Query({
returnGeometry: true,
outFields: ["*"]
});
// 创建二维地图
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 11,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [116.3, 40],
});
const legend = new Legend({
view: view,
layerInfos: [
{
layer: buildinglayer,
title: "易燃易爆建筑分布"
},
{
layer: tunnelLayer,
title: "燃气管道分布"
}
]
});
view.ui.add(legend, "bottom-left");
view.ui.add(info, "top-right");
document.getElementById("name").innerHTML = "化工桥化工厂";
document.getElementById("category").innerHTML = "化工厂";
view.when(function () {
view.ui.add("optionsDiv", "bottom-right");
document.getElementById("doBtn").addEventListener("click", doQuery);
document.getElementById("tunelBtn").addEventListener("click", showTunel);
document.getElementById("bldBtn").addEventListener("click", showBuilding);
tunnelLayer.queryFeatures().then(function (results) {
wellsGeometries = results.features.map(function (feature) {
return feature.geometry;
});
});
buildinglayer.queryFeatures().then(getValues)
.then(getUniqueValues)
.then(addToSelect);
buildinglayer.queryFeatures().then(function (response) {
response.features.forEach(function (item, i) {
if (item.attributes.name == "化工桥化工厂") {
warning_graphic = new Graphic({
geometry: item.geometry,
symbol: symbol_warning,
popupTemplate : template_warning
})
}
});
resultsLayer.add(warning_graphic);
})
}).catch(function (error) {
console.log(error.message);
})
function showTunel() {
tunnelLayer.visible = true;
}
function showBuilding() {
buildinglayer.visible = true;
if (isBuffered && tunnelLayer.visible) {
inBufferQuery(tunnelBuffers);
}
}
function doQuery() {
resultsLayer.removeAll();
tunnelLayer.definitionExpression = "type = '管道'";
createBuffer(wellsGeometries);
}
function createBuffer(geometries) {
resultsLayer.removeAll();
var bufferDistance = parseInt(distanceSlider.value)*5;
tunnelBuffers = geometryEngine.geodesicBuffer(
geometries[0],
bufferDistance,
"meters",
true
);
var bufferGraphic = new Graphic({
geometry: tunnelBuffers,
symbol: {
type: "simple-fill",
color: [227, 139, 79, 0.3],
outline: {
color: [255, 255, 255],
width: 1
}
}
});
isBuffered = true;
if( tunnelLayer.visible){
resultsLayer.add(bufferGraphic);
}
if (buildinglayer.visible) {
inBufferQuery(tunnelBuffers);
}
resultsLayer.add(warning_graphic);
}
function inBufferQuery(buffergeometry) {
var query1 = buildinglayer.createQuery();
query1.outSpatialReference = { wkid: 4326 };
query1.returnGeometry = true;
buildinglayer.queryFeatures(query1)
.then(function (results) {
var inbufferGeometries = results.features.map(function (feature1) {
if (feature1.attributes.name != "化工桥化工厂") {
if (geometryEngine.contains(buffergeometry, feature1.geometry)) {
return feature1.geometry;
}
}
});
inbufferGeometries.forEach(function (geom, i) {
if (geom) {
resultsLayer.add(new Graphic({
geometry: geom,
symbol: symbol_yellow
}))
}
})
});
};
function getValues(response) {
var features = response.features;
var values = features.map(function (feature) {
return feature.attributes.type;
});
return values;
}
function getUniqueValues(values) {
var uniqueValues = ["全部"];
values.forEach(function (item, i) {
if (
(uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) &&
item !== ""
) {
uniqueValues.push(item);
}
});
return uniqueValues;
}
function addToSelect(values) {
values.sort();
values.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
wellTypeSelect.add(option);
});
}
function queryForWellGeometries() {
var buildingQuery = buildinglayer.createQuery();
buildinglayer.queryFeatures(buildingQuery).then(function (response) {
response.features.forEach(function (item, i) {
item.visible = true;
})
})
}
function setWellsDefinitionExpression(newValue) {
if (!buildinglayer.visible) {
buildinglayer.visible = true;
}
if (newValue == "全部") {
buildinglayer.visible = true;
buildinglayer.definitionExpression = "id > -1";
}
else {
buildinglayer.definitionExpression = "type = '" + newValue + "'";
}
return queryForWellGeometries();
}
distanceSlider.addEventListener("input", function () {
document.getElementById("distance-value").innerText =
distanceSlider.value;
});
distanceSlider.addEventListener("change", function () {
createBuffer(wellsGeometries);
});
wellTypeSelect.addEventListener("change", function () {
var type = event.target.value;
setWellsDefinitionExpression(type);
createBuffer(wellsGeometries);
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="info">
<span id="title">警报</span> <br />
<span id="category"></span> <br />
<span id="name"></span>
</div>
<div class="esri-widget" id="optionsDiv">
易燃易爆建筑类型:
<select id="well-type">全部</select>
<br />
<br>
缓冲区宽度:
<input id="distance" type="range" min="10" max="300" step="10" value="300" />&nbsp; <span
id="distance-value">300</span> 倍管径 <br />
<br>
<label for=""><span></span></label> <button class="esri-widget" id="tunelBtn">天然气管道（直径1016mm）查询</button> <span></span>
<button class="esri-widget" id="bldBtn">高后果区等级识别</button> <br />
<!-- <label for=""><span></span></label> <button class="esri-widget" id="tunelBtn">易燃爆建筑显示</button> <br /> -->
<!-- <span></span><button>易燃爆建筑显示</button> -->
<br>
<label for=""><span></span></label> <button class="esri-widget" id="doBtn">天然气管道高后果区分析</button> <br />
<br>
</div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-manage_layers.html 0 → 100644
View file @ cb7659f4
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Visualize points with a heatmap - 4.12</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<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>
var map, view;
require([
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/layers/MapImageLayer",
"esri/widgets/LayerList",
"esri/renderers/smartMapping/creators/heatmap"
], function (Map, Basemap, MapView, WebTileLayer, TileInfo, MapImageLayer, LayerList,
heatmapRendererCreator) {
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 mapserverlayer = new MapImageLayer({
url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_JTQJ/MapServer",
id: "GZ_JTQJ",
sublayers: [{
id: 0,
title: "车检器",
visible: false,
source: {
mapLayerId: 0
},
popupTemplate: {
title: "车检器",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "device_nam",
label: "设备名称：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "device_cod",
label: "设备编号：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "route_name",
label: "所属道路；",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "road_sec_n",
label: "所属路段：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}
]
}]
}
},
{
id: 1,
title: "气象监测仪",
visible: false,
source: {
mapLayerId: 1
},
popupTemplate: {
title: "气象监测仪",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "device_nam",
label: "设备名称：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "device_id",
label: "设备编号：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "factors_co",
label: "要素采集：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "route_name",
label: "所属道路：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "owner_name",
label: "管理单位：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "mount_time",
label: "安装时间：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}
]
}]
}
},
{
id: 2,
title: "交调设备",
visible: false,
source: {
mapLayerId: 2
},
popupTemplate: {
title: "交调设备",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "station_ca",
label: "交调站类别：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "station_ty",
label: "交调站类型：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "route_name",
label: "所属道路：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "section_na",
label: "所属路段：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "owner_name",
label: "管理单位：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}
]
}]
}
},
{
id: 3,
title: "服务区",
visible: false,
source: {
mapLayerId: 3
},
popupTemplate: {
title: "服务区",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "service_ar",
label: "服务区名称：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "maintenanc",
label: "管理单位：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "route_name",
label: "所属道路：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "service_co",
label: "服务内容：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}
]
}]
}
},
{
id: 4,
title: "火车站",
visible: false,
source: {
mapLayerId: 4
},
popupTemplate: {
title: "火车站",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "name_zh",
label: "火车站名称：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "address",
label: "详细地址：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}
]
}]
}
},
{
id: 5,
title: "事件监测仪",
visible: false,
source: {
mapLayerId: 5
},
popupTemplate: {
title: "事件监测仪",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "device_nam",
label: "设备名称：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "route_name",
label: "所属道路：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "ddbh",
label: "设备编码：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}
]
}]
}
},
{
id: 6,
title: "情报板",
visible: false,
source: {
mapLayerId: 6
},
popupTemplate: {
title: "情报板",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "board_name",
label: "设备名称：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "route_name",
label: "所属道路：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "pile_numbe",
label: "桩号：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}
]
}]
}
},
{
id: 7,
title: "港口",
visible: false,
source: {
mapLayerId: 7
},
popupTemplate: {
title: "港口",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "PORT_NAME",
label: "港口名称：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "UNIT_NAME",
label: "管理单位：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "YARD_AREA",
label: "港口面积：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}
]
}]
}
},
{
id: 8,
title: "客运站",
visible: true,
source: {
mapLayerId: 8
},
popupTemplate: {
title: "客运站",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "name_zh",
label: "客运站名称：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "level",
label: "客运站等级：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "address",
label: "详细地址：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}
]
}]
}
},
{
id: 9,
title: "隧道",
visible: false,
source: {
mapLayerId: 9
},
popupTemplate: {
title: "隧道",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "tunnel_nam",
label: "隧道名称：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "tunnel_len",
label: "隧道全长：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "tunnel_wid",
label: "隧道宽度：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "tunnel_hei",
label: "隧道高度：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "route_name",
label: "所属道路：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "tunnel_lev",
label: "隧道等级：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "is_below_w",
label: "是否水下：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "bulid_year",
label: "修建时间：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "bulid_unit",
label: "修建单位：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}
]
}]
}
},
{
id: 10,
title: "桥梁",
visible: false,
source: {
mapLayerId: 10
},
popupTemplate: {
title: "桥梁",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "bridege_na",
label: "桥梁名称：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "bridege_al",
label: "桥梁全长：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "bridege_00",
label: "桥梁宽度：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "bulid_year",
label: "修建时间：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "collision_",
label: "防护类型：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "design_loa",
label: "桥梁道路等级：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "material_s",
label: "桥梁材质：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "route_name",
label: "所属道路：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "supervise_",
label: "管理单位：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}
]
}]
}
},
{
id: 11,
title: "收费站",
visible: false,
source: {
mapLayerId: 11
},
popupTemplate: {
title: "收费站",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "toll_name",
label: "收费站名称：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "route_name",
label: "所属道路：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}
]
}]
}
},
{
id: 12,
title: "摄像头",
visible: false,
source: {
mapLayerId: 12
},
popupTemplate: {
title: "摄像头",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "sbmc",
label: "设备名称：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "sbbm",
label: "设备编号：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "lxmc",
label: "所属道路：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "ldmc",
label: "所属路段：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}
]
}]
}
},
{
id: 13,
title: "机场",
visible: false,
source: {
mapLayerId: 13
},
popupTemplate: {
title: "机场",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "name_zh",
label: "机场名称：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "address",
label: "详细地址：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}
]
}]
}
}
]
});
// 创建地图
map = new Map({
basemap: tdtBasemap,
layers: [mapserverlayer]
});
view = new MapView({
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 7,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [106.6587, 26.3644],
map: map
});
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>
static/view/demo/page-migrate.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模拟人口迁徙</title>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.container {
display: flex;
height: 100%;
flex-direction: row;
}
.container>div {
flex: 1 1 auto;
width: 50%;
height: 100%;
}
</style>
<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>
var __DEV__ = false;
var geoCoordMap = {
'海门': [121.15, 31.89],
'鄂尔多斯': [109.781327, 39.608266],
'招远': [120.38, 37.35],
'舟山': [122.207216, 29.985295],
'齐齐哈尔': [123.97, 47.33],
'盐城': [120.13, 33.38],
'赤峰': [118.87, 42.28],
'青岛': [120.33, 36.07],
'乳山': [121.52, 36.89],
'金昌': [102.188043, 38.520089],
'泉州': [118.58, 24.93],
'莱西': [120.53, 36.86],
'日照': [119.46, 35.42],
'胶南': [119.97, 35.88],
'南通': [121.05, 32.08],
'拉萨': [91.11, 29.97],
'云浮': [112.02, 22.93],
'梅州': [116.1, 24.55],
'文登': [122.05, 37.2],
'上海': [121.48, 31.22],
'攀枝花': [101.718637, 26.582347],
'威海': [122.1, 37.5],
'承德': [117.93, 40.97],
'厦门': [118.1, 24.46],
'汕尾': [115.375279, 22.786211],
'潮州': [116.63, 23.68],
'丹东': [124.37, 40.13],
'太仓': [121.1, 31.45],
'曲靖': [103.79, 25.51],
'烟台': [121.39, 37.52],
'福州': [119.3, 26.08],
'瓦房店': [121.979603, 39.627114],
'即墨': [120.45, 36.38],
'抚顺': [123.97, 41.97],
'玉溪': [102.52, 24.35],
'张家口': [114.87, 40.82],
'阳泉': [113.57, 37.85],
'莱州': [119.942327, 37.177017],
'湖州': [120.1, 30.86],
'汕头': [116.69, 23.39],
'昆山': [120.95, 31.39],
'宁波': [121.56, 29.86],
'湛江': [110.359377, 21.270708],
'揭阳': [116.35, 23.55],
'荣成': [122.41, 37.16],
'连云港': [119.16, 34.59],
'葫芦岛': [120.836932, 40.711052],
'常熟': [120.74, 31.64],
'东莞': [113.75, 23.04],
'河源': [114.68, 23.73],
'淮安': [119.15, 33.5],
'泰州': [119.9, 32.49],
'南宁': [108.33, 22.84],
'营口': [122.18, 40.65],
'惠州': [114.4, 23.09],
'江阴': [120.26, 31.91],
'蓬莱': [120.75, 37.8],
'韶关': [113.62, 24.84],
'嘉峪关': [98.289152, 39.77313],
'广州': [113.23, 23.16],
'延安': [109.47, 36.6],
'太原': [112.53, 37.87],
'清远': [113.01, 23.7],
'中山': [113.38, 22.52],
'昆明': [102.73, 25.04],
'寿光': [118.73, 36.86],
'盘锦': [122.070714, 41.119997],
'长治': [113.08, 36.18],
'深圳': [114.07, 22.62],
'珠海': [113.52, 22.3],
'宿迁': [118.3, 33.96],
'咸阳': [108.72, 34.36],
'铜川': [109.11, 35.09],
'平度': [119.97, 36.77],
'佛山': [113.11, 23.05],
'海口': [110.35, 20.02],
'江门': [113.06, 22.61],
'章丘': [117.53, 36.72],
'肇庆': [112.44, 23.05],
'大连': [121.62, 38.92],
'临汾': [111.5, 36.08],
'吴江': [120.63, 31.16],
'石嘴山': [106.39, 39.04],
'沈阳': [123.38, 41.8],
'苏州': [120.62, 31.32],
'茂名': [110.88, 21.68],
'嘉兴': [120.76, 30.77],
'长春': [125.35, 43.88],
'胶州': [120.03336, 36.264622],
'银川': [106.27, 38.47],
'张家港': [120.555821, 31.875428],
'三门峡': [111.19, 34.76],
'锦州': [121.15, 41.13],
'南昌': [115.89, 28.68],
'柳州': [109.4, 24.33],
'三亚': [109.511909, 18.252847],
'自贡': [104.778442, 29.33903],
'吉林': [126.57, 43.87],
'阳江': [111.95, 21.85],
'泸州': [105.39, 28.91],
'西宁': [101.74, 36.56],
'宜宾': [104.56, 29.77],
'呼和浩特': [111.65, 40.82],
'成都': [104.06, 30.67],
'大同': [113.3, 40.12],
'镇江': [119.44, 32.2],
'桂林': [110.28, 25.29],
'张家界': [110.479191, 29.117096],
'宜兴': [119.82, 31.36],
'北海': [109.12, 21.49],
'西安': [108.95, 34.27],
'金坛': [119.56, 31.74],
'东营': [118.49, 37.46],
'牡丹江': [129.58, 44.6],
'遵义': [106.9, 27.7],
'绍兴': [120.58, 30.01],
'扬州': [119.42, 32.39],
'常州': [119.95, 31.79],
'潍坊': [119.1, 36.62],
'重庆': [106.54, 29.59],
'台州': [121.420757, 28.656386],
'南京': [118.78, 32.04],
'滨州': [118.03, 37.36],
'贵阳': [106.71, 26.57],
'无锡': [120.29, 31.59],
'本溪': [123.73, 41.3],
'克拉玛依': [84.77, 45.59],
'渭南': [109.5, 34.52],
'马鞍山': [118.48, 31.56],
'宝鸡': [107.15, 34.38],
'焦作': [113.21, 35.24],
'句容': [119.16, 31.95],
'北京': [116.46, 39.92],
'徐州': [117.2, 34.26],
'衡水': [115.72, 37.72],
'包头': [110, 40.58],
'绵阳': [104.73, 31.48],
'乌鲁木齐': [87.68, 43.77],
'枣庄': [117.57, 34.86],
'杭州': [120.19, 30.26],
'淄博': [118.05, 36.78],
'鞍山': [122.85, 41.12],
'溧阳': [119.48, 31.43],
'库尔勒': [86.06, 41.68],
'安阳': [114.35, 36.1],
'开封': [114.35, 34.79],
'济南': [117, 36.65],
'德阳': [104.37, 31.13],
'温州': [120.65, 28.01],
'九江': [115.97, 29.71],
'邯郸': [114.47, 36.6],
'临安': [119.72, 30.23],
'兰州': [103.73, 36.03],
'沧州': [116.83, 38.33],
'临沂': [118.35, 35.05],
'南充': [106.110698, 30.837793],
'天津': [117.2, 39.13],
'富阳': [119.95, 30.07],
'泰安': [117.13, 36.18],
'诸暨': [120.23, 29.71],
'郑州': [113.65, 34.76],
'哈尔滨': [126.63, 45.75],
'聊城': [115.97, 36.45],
'芜湖': [118.38, 31.33],
'唐山': [118.02, 39.63],
'平顶山': [113.29, 33.75],
'邢台': [114.48, 37.05],
'德州': [116.29, 37.45],
'济宁': [116.59, 35.38],
'荆州': [112.239741, 30.335165],
'宜昌': [111.3, 30.7],
'义乌': [120.06, 29.32],
'丽水': [119.92, 28.45],
'洛阳': [112.44, 34.7],
'秦皇岛': [119.57, 39.95],
'株洲': [113.16, 27.83],
'石家庄': [114.48, 38.03],
'莱芜': [117.67, 36.19],
'常德': [111.69, 29.05],
'保定': [115.48, 38.85],
'湘潭': [112.91, 27.87],
'金华': [119.64, 29.12],
'岳阳': [113.09, 29.37],
'长沙': [113, 28.21],
'衢州': [118.88, 28.97],
'廊坊': [116.7, 39.53],
'菏泽': [115.480656, 35.23375],
'合肥': [117.27, 31.86],
'武汉': [114.31, 30.52],
'大庆': [125.03, 46.58]
};
require([
"esri/Map",
"esri/Basemap",
"https://apaas.wodcloud.com/mapsamples/static/js/4EchartsLayer.js",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"dojo/domReady!"
], function (
Map, Basemap, echartsLayer, MapView, WebTileLayer, TileInfo
) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
let 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"]
});
let 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"]
});
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledlayer, annolayer],
title: "TDT Basemap",
id: "tdtBasemap",
});
// 创建地图
var map = new Map({
basemap: tdtBasemap
});
//创建二维地图
var view = new MapView({
map: map,
container: "map",
zoom: 4,
center: [106.720725933, 26.5453458492]
});
var BJData = [
[{
name: '北京'
}, {
name: '上海',
value: 95
}],
[{
name: '北京'
}, {
name: '广州',
value: 90
}],
[{
name: '北京'
}, {
name: '大连',
value: 80
}],
[{
name: '北京'
}, {
name: '南宁',
value: 70
}],
[{
name: '北京'
}, {
name: '南昌',
value: 60
}],
[{
name: '北京'
}, {
name: '拉萨',
value: 50
}],
[{
name: '北京'
}, {
name: '长春',
value: 40
}],
[{
name: '北京'
}, {
name: '包头',
value: 30
}],
[{
name: '北京'
}, {
name: '重庆',
value: 20
}],
[{
name: '北京'
}, {
name: '常州',
value: 10
}]
];
var SHData = [
[{
name: '上海'
}, {
name: '包头',
value: 95
}],
[{
name: '上海'
}, {
name: '昆明',
value: 90
}],
[{
name: '上海'
}, {
name: '广州',
value: 80
}],
[{
name: '上海'
}, {
name: '郑州',
value: 70
}],
[{
name: '上海'
}, {
name: '长春',
value: 60
}],
[{
name: '上海'
}, {
name: '重庆',
value: 50
}],
[{
name: '上海'
}, {
name: '长沙',
value: 40
}],
[{
name: '上海'
}, {
name: '北京',
value: 30
}],
[{
name: '上海'
}, {
name: '丹东',
value: 20
}],
[{
name: '上海'
}, {
name: '大连',
value: 10
}]
];
var GZData = [
[{
name: '广州'
}, {
name: '福州',
value: 95
}],
[{
name: '广州'
}, {
name: '太原',
value: 90
}],
[{
name: '广州'
}, {
name: '长春',
value: 80
}],
[{
name: '广州'
}, {
name: '重庆',
value: 70
}],
[{
name: '广州'
}, {
name: '西安',
value: 60
}],
[{
name: '广州'
}, {
name: '成都',
value: 50
}],
[{
name: '广州'
}, {
name: '常州',
value: 40
}],
[{
name: '广州'
}, {
name: '北京',
value: 30
}],
[{
name: '广州'
}, {
name: '北海',
value: 20
}],
[{
name: '广州'
}, {
name: '海口',
value: 10
}]
];
var planePath =
'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
view.when(function () {
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
value: dataItem[1].value
});
}
}
return res;
};
var color = ['#a6c84c', '#ffa022', '#46bee9'];
var series = [];
[
['北京', BJData],
['上海', SHData],
['广州', GZData]
].forEach(function (item, i) {
series.push(
{
name: item[0] + ' Top10',
type: 'lines',
coordinateSystem: 'arcgis',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.2
}
},
data: convertData(item[1])
}, {
name: item[0] + ' Top10',
type: 'lines',
coordinateSystem: 'arcgis',
zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0] + ' Top10',
type: 'effectScatter',
coordinateSystem: 'arcgis',
symbol: 'circle',
zlevel: 2,
rippleEffect: {
brushType: 'fill',
scale: 4
},
// label: {
// normal: {
// show: true,
// position: 'right',
// formatter: '{b}'
// }
// },
symbolSize: 5,
itemStyle: {
normal: {
color: color[i]
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([
dataItem[1].value
])
};
})
},
);
});
var option = {
title: {
text: '模拟迁徙',
left: 'center',
textStyle: {
color: '#fff'
}
},
series: series
};
console.log(series);
option.series.push({
name: ' Top10',
type: 'effectScatter',
coordinateSystem: 'arcgis',
symbol: 'circle',
zlevel: 2,
rippleEffect: {
brushType: 'fill',
scale: 4
},
// label: {
// normal: {
// show: true,
// position: 'right',
// formatter: '{b}'
// }
// },
symbolSize: 10,
itemStyle: {
normal: {
color: '#46bee9'
}
},
data: []
})
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 => {
let pt = view.toMap(event)
option.series[option.series.length - 1].data = [{ value: [pt.longitude, pt.latitude] }]
chart.setChartOption(option)
})
});
});
</script>
</head>
<body class="tundra">
<div class="container">
<div id="map"></div>
</div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-migrate2.html 0 → 100644
View file @ cb7659f4
<html>
<head>
<meta charset="utf-8">
<title>模拟人口迁徙</title>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.container {
display: flex;
height: 100%;
flex-direction: row;
}
.container>div {
flex: 1 1 auto;
width: 50%;
height: 100%;
}
</style>
<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>
var __DEV__ = false;
var geoCoordMap = {
'海门': [121.15, 31.89],
'鄂尔多斯': [109.781327, 39.608266],
'招远': [120.38, 37.35],
'舟山': [122.207216, 29.985295],
'齐齐哈尔': [123.97, 47.33],
'盐城': [120.13, 33.38],
'赤峰': [118.87, 42.28],
'青岛': [120.33, 36.07],
'乳山': [121.52, 36.89],
'金昌': [102.188043, 38.520089],
'泉州': [118.58, 24.93],
'莱西': [120.53, 36.86],
'日照': [119.46, 35.42],
'胶南': [119.97, 35.88],
'南通': [121.05, 32.08],
'拉萨': [91.11, 29.97],
'云浮': [112.02, 22.93],
'梅州': [116.1, 24.55],
'文登': [122.05, 37.2],
'上海': [121.48, 31.22],
'攀枝花': [101.718637, 26.582347],
'威海': [122.1, 37.5],
'承德': [117.93, 40.97],
'厦门': [118.1, 24.46],
'汕尾': [115.375279, 22.786211],
'潮州': [116.63, 23.68],
'丹东': [124.37, 40.13],
'太仓': [121.1, 31.45],
'曲靖': [103.79, 25.51],
'烟台': [121.39, 37.52],
'福州': [119.3, 26.08],
'瓦房店': [121.979603, 39.627114],
'即墨': [120.45, 36.38],
'抚顺': [123.97, 41.97],
'玉溪': [102.52, 24.35],
'张家口': [114.87, 40.82],
'阳泉': [113.57, 37.85],
'莱州': [119.942327, 37.177017],
'湖州': [120.1, 30.86],
'汕头': [116.69, 23.39],
'昆山': [120.95, 31.39],
'宁波': [121.56, 29.86],
'湛江': [110.359377, 21.270708],
'揭阳': [116.35, 23.55],
'荣成': [122.41, 37.16],
'连云港': [119.16, 34.59],
'葫芦岛': [120.836932, 40.711052],
'常熟': [120.74, 31.64],
'东莞': [113.75, 23.04],
'河源': [114.68, 23.73],
'淮安': [119.15, 33.5],
'泰州': [119.9, 32.49],
'南宁': [108.33, 22.84],
'营口': [122.18, 40.65],
'惠州': [114.4, 23.09],
'江阴': [120.26, 31.91],
'蓬莱': [120.75, 37.8],
'韶关': [113.62, 24.84],
'嘉峪关': [98.289152, 39.77313],
'广州': [113.23, 23.16],
'延安': [109.47, 36.6],
'太原': [112.53, 37.87],
'清远': [113.01, 23.7],
'中山': [113.38, 22.52],
'昆明': [102.73, 25.04],
'寿光': [118.73, 36.86],
'盘锦': [122.070714, 41.119997],
'长治': [113.08, 36.18],
'深圳': [114.07, 22.62],
'珠海': [113.52, 22.3],
'宿迁': [118.3, 33.96],
'咸阳': [108.72, 34.36],
'铜川': [109.11, 35.09],
'平度': [119.97, 36.77],
'佛山': [113.11, 23.05],
'海口': [110.35, 20.02],
'江门': [113.06, 22.61],
'章丘': [117.53, 36.72],
'肇庆': [112.44, 23.05],
'大连': [121.62, 38.92],
'临汾': [111.5, 36.08],
'吴江': [120.63, 31.16],
'石嘴山': [106.39, 39.04],
'沈阳': [123.38, 41.8],
'苏州': [120.62, 31.32],
'茂名': [110.88, 21.68],
'嘉兴': [120.76, 30.77],
'长春': [125.35, 43.88],
'胶州': [120.03336, 36.264622],
'银川': [106.27, 38.47],
'张家港': [120.555821, 31.875428],
'三门峡': [111.19, 34.76],
'锦州': [121.15, 41.13],
'南昌': [115.89, 28.68],
'柳州': [109.4, 24.33],
'三亚': [109.511909, 18.252847],
'自贡': [104.778442, 29.33903],
'吉林': [126.57, 43.87],
'阳江': [111.95, 21.85],
'泸州': [105.39, 28.91],
'西宁': [101.74, 36.56],
'宜宾': [104.56, 29.77],
'呼和浩特': [111.65, 40.82],
'成都': [104.06, 30.67],
'大同': [113.3, 40.12],
'镇江': [119.44, 32.2],
'桂林': [110.28, 25.29],
'张家界': [110.479191, 29.117096],
'宜兴': [119.82, 31.36],
'北海': [109.12, 21.49],
'西安': [108.95, 34.27],
'金坛': [119.56, 31.74],
'东营': [118.49, 37.46],
'牡丹江': [129.58, 44.6],
'遵义': [106.9, 27.7],
'绍兴': [120.58, 30.01],
'扬州': [119.42, 32.39],
'常州': [119.95, 31.79],
'潍坊': [119.1, 36.62],
'重庆': [106.54, 29.59],
'台州': [121.420757, 28.656386],
'南京': [118.78, 32.04],
'滨州': [118.03, 37.36],
'贵阳': [106.71, 26.57],
'无锡': [120.29, 31.59],
'本溪': [123.73, 41.3],
'克拉玛依': [84.77, 45.59],
'渭南': [109.5, 34.52],
'马鞍山': [118.48, 31.56],
'宝鸡': [107.15, 34.38],
'焦作': [113.21, 35.24],
'句容': [119.16, 31.95],
'北京': [116.46, 39.92],
'徐州': [117.2, 34.26],
'衡水': [115.72, 37.72],
'包头': [110, 40.58],
'绵阳': [104.73, 31.48],
'乌鲁木齐': [87.68, 43.77],
'枣庄': [117.57, 34.86],
'杭州': [120.19, 30.26],
'淄博': [118.05, 36.78],
'鞍山': [122.85, 41.12],
'溧阳': [119.48, 31.43],
'库尔勒': [86.06, 41.68],
'安阳': [114.35, 36.1],
'开封': [114.35, 34.79],
'济南': [117, 36.65],
'德阳': [104.37, 31.13],
'温州': [120.65, 28.01],
'九江': [115.97, 29.71],
'邯郸': [114.47, 36.6],
'临安': [119.72, 30.23],
'兰州': [103.73, 36.03],
'沧州': [116.83, 38.33],
'临沂': [118.35, 35.05],
'南充': [106.110698, 30.837793],
'天津': [117.2, 39.13],
'富阳': [119.95, 30.07],
'泰安': [117.13, 36.18],
'诸暨': [120.23, 29.71],
'郑州': [113.65, 34.76],
'哈尔滨': [126.63, 45.75],
'聊城': [115.97, 36.45],
'芜湖': [118.38, 31.33],
'唐山': [118.02, 39.63],
'平顶山': [113.29, 33.75],
'邢台': [114.48, 37.05],
'德州': [116.29, 37.45],
'济宁': [116.59, 35.38],
'荆州': [112.239741, 30.335165],
'宜昌': [111.3, 30.7],
'义乌': [120.06, 29.32],
'丽水': [119.92, 28.45],
'洛阳': [112.44, 34.7],
'秦皇岛': [119.57, 39.95],
'株洲': [113.16, 27.83],
'石家庄': [114.48, 38.03],
'莱芜': [117.67, 36.19],
'常德': [111.69, 29.05],
'保定': [115.48, 38.85],
'湘潭': [112.91, 27.87],
'金华': [119.64, 29.12],
'岳阳': [113.09, 29.37],
'长沙': [113, 28.21],
'衢州': [118.88, 28.97],
'廊坊': [116.7, 39.53],
'菏泽': [115.480656, 35.23375],
'合肥': [117.27, 31.86],
'武汉': [114.31, 30.52],
'大庆': [125.03, 46.58]
};
var map,view,scatterData,lineData;
require([
"esri/Map",
"esri/Basemap",
"https://apaas.wodcloud.com/mapsamples/static/js/4EchartsLayer.js",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"dojo/domReady!"
], function (
Map, Basemap, echartsLayer, MapView, WebTileLayer, TileInfo
) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
let 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"]
});
let 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"]
});
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledlayer, annolayer],
title: "TDT Basemap",
id: "tdtBasemap",
});
// 创建地图
map = new Map({
basemap: tdtBasemap
});
//创建二维地图
view = new MapView({
map: map,
container: "map",
zoom: 4,
center: [108.4766, 32.4801]
});
var BJData = [
[{
name: '北京'
}, {
name: '上海',
value: 95
}],
[{
name: '北京'
}, {
name: '广州',
value: 90
}],
[{
name: '北京'
}, {
name: '大连',
value: 80
}],
[{
name: '北京'
}, {
name: '南宁',
value: 70
}],
[{
name: '北京'
}, {
name: '南昌',
value: 60
}],
[{
name: '北京'
}, {
name: '拉萨',
value: 50
}],
[{
name: '北京'
}, {
name: '长春',
value: 40
}],
[{
name: '北京'
}, {
name: '包头',
value: 30
}],
[{
name: '北京'
}, {
name: '重庆',
value: 20
}],
[{
name: '北京'
}, {
name: '常州',
value: 10
}]
];
scatterData = [];
lineData = [];
view.when(function () {
for (var i = 0; i < BJData.length; i++) {
var dataItem = BJData[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
scatterData.push({
name: dataItem[1].name,
count: dataItem[1].value,
value: toCoord
});
lineData.push({
name: dataItem[0].name,
count: dataItem[1].value,
dest: dataItem[1].name,
coords: [fromCoord, toCoord]
});
}
}
var OD_Color = ["#00F8FF", "#00FF00", "#FFF800", "#FF0000"];
//颜色设置
var getColor = function (param) {
var factor = param.data.count;
var index;
if (factor >= 0 && factor < 30) {
index = 0;
} else if (factor >= 30 && factor < 60) {
index = 1;
} else if (factor >= 60 && factor < 90) {
index = 2;
} else {
index = 3;
}
return OD_Color[index];
};
var series = [{
name: "bgLine",
type: "lines",
coordinateSystem: "arcgis",
zlevel: 1,
// symbol: ['none', 'arrow'],
// symbolSize: 10,
lineStyle: {
normal: {
color: getColor,
width: 2,
opacity: 0.5,
curveness: 0.2
}
},
data: lineData
},
{
name: "scatter",
type: "effectScatter",
coordinateSystem: "arcgis",
zlevel: 2,
rippleEffect: {
scale: 50,
brushType: "stroke"
},
label: {
normal: {
show: true,
position: "right",
formatter: "{b}"
}
},
symbolSize: 0.2,
itemStyle: {
normal: {
show: true,
color: getColor
}
},
data: scatterData
},
{
name: "sLine",
type: "lines",
coordinateSystem: "arcgis",
zlevel: 3,
effect: {
show: true,
period: 6,
trailLength: 0.4,
symbolSize: 2
},
lineStyle: {
normal: {
color: getColor,
width: 0,
curveness: 0.2
}
},
data: lineData
},
{
name: "lLine",
type: "lines",
coordinateSystem: "arcgis",
zlevel: 4,
effect: {
show: true,
period: 6,
trailLength: 0.4,
opacity: 0.1,
symbolSize: 10
},
lineStyle: {
normal: {
color: getColor,
width: 0,
curveness: 0.2
}
},
data: lineData
}
];
//组装option
var option = {
tooltip: {
trigger: "item",
backgroundColor: "rgba(0,0,0,1)",
formatter: function (param) {
return (
param.data.name +
"->" +
param.data.dest +
": " +
Math.ceil(param.data.count)
);
}
},
series: series
};
var chart = new echartsLayer(view, echarts, option);
});
});
</script>
</head>
<body class="tundra">
<div class="container">
<div id="map"></div>
</div>
</body>
</html>
static/view/demo/page-movinglayer.html 0 → 100644
View file @ cb7659f4
<!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 src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script>
let map,
view,
trafficlayer,
selectedGraphics,
selectedLineGraphic,
movelayer,
linemovelayer,
progress = 0,
symbol,
movecounts,
state = false,
timer,
polylineSymbol,
graphics;
require([
"esri/Map",
"esri/Basemap",
"esri/TimeExtent",
"esri/layers/support/TimeInfo",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/layers/MapImageLayer",
"esri/layers/FeatureLayer",
"esri/views/layers/FeatureLayerView",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/geometry/SpatialReference",
"esri/symbols/SimpleMarkerSymbol",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/symbols/PictureMarkerSymbol",
"esri/core/watchUtils",
"dojo/domReady!"
], function (Map,
Basemap,
TimeExtent,
TimeInfo,
MapView,
WebTileLayer,
TileInfo,
MapImageLayer,
FeatureLayer,
FeatureLayerView,
Point,
Polyline,
SpatialReference,
SimpleMarkerSymbol,
GraphicsLayer,
Graphic,
PictureMarkerSymbol,
watchUtils, ) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
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-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
}
}
);
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
}
});
map = new Map({
basemap: tdtBasemap
});
view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 7,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [105.613895, 25.646009]
});
view.ui.remove("zoom");
view.ui._removeComponents(["attribution"]);
view.popup.dockOptions = {
breakpoint: false,
position: "top-center"
};
polylineSymbol = {
type: "simple-line", // autocasts as SimpleLineSymbol()
color: [226, 119, 40],
width: 4
}
$.get("https://apaas.wodcloud.com/trans/api/realTimeTraffic/mapLocation", function (data) {
trafficlayer = new GraphicsLayer();
movelayer = new GraphicsLayer();
linemovelayer = new GraphicsLayer();
if (!data.features || !data.features.length) {
console.log("no data");
return;
}
var wkid = data.crs.properties.name.split("EPSG::")[1];
var features = data.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
if (feature) {
var properties = feature.properties;
var lon =
feature.geometry.coordinates[0][0] ||
feature.geometry.coordinates[0];
var lat =
feature.geometry.coordinates[0][1] ||
feature.geometry.coordinates[1];
var pt = new Point({
x: lon,
y: lat,
spatialReference: view.spatialReference
});
symbol = new PictureMarkerSymbol("https://apaas.wodcloud.com/minemapapi/image/jtqj3/ic_wxhuoche.png",
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 popupTemplate = {
title: "两客一危车辆",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "vehicle_number",
label: "车牌号：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "total_mileage",
label: "总里程：",
visible: true,
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "recorder_speed",
label: "当前速度",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}
]
}]
};
var graphic = new Graphic(pt, symbol, attr, popupTemplate);
trafficlayer.add(graphic);
}
}
map.add(trafficlayer);
map.add(movelayer);
map.add(linemovelayer);
watchUtils.when(view, "stationary", updateOverviewExtent);
});
function updateOverviewExtent() {
trafficlayer.visible = true;
console.log("extent", view.zoom);
graphics = trafficlayer.graphics.clone();
if (timer) {
clearInterval(timer);
}
movelayer.removeAll();
linemovelayer.removeAll();
selectedGraphics =[];
selectedLineGraphic = [];
if (graphics && view.zoom >= 11) {
selectedGraphics =[];
selectedLineGraphic = [];
for (var i = 0, total = graphics.items.length; i < total; i++) {
if (view.extent.contains(graphics.items[i].geometry)) {
selectedGraphics.push(graphics.items[i]);
console.log("i:",i)
var polyline = {
type: "polyline",
paths: []
}
polyline.paths[0] = new Array();
polyline.paths[0].push([graphics.items[i].geometry.x, graphics.items[i].geometry.y])
var polylineGraphic = new Graphic({
geometry: polyline,
symbol: polylineSymbol,
});
selectedLineGraphic.push(polylineGraphic)
}
}
}
if (selectedGraphics.length > 0) {
trafficlayer.visible = false;
movelayer.visible = true;
movecounts = 0;
if (timer) {
clearInterval(timer);
}
timer = setInterval(() => {
movelayer.removeAll();
linemovelayer.removeAll();
for (var i = 0; i < selectedGraphics.length; i++) {
var angle =
((2 * Math.PI) / 360) * selectedGraphics[i].attributes.direction;
if (movecounts == 50) {
selectedGraphics[i].geometry.x -= 0.025 * Math.sin(angle);
selectedGraphics[i].geometry.y -= 0.025 * Math.cos(angle);
selectedLineGraphic[i].geometry.paths[0] = selectedLineGraphic[i].geometry.paths[0].slice(0, 1)
} else {
selectedGraphics[i].geometry.x += 0.0005 * Math.sin(angle);
selectedGraphics[i].geometry.y += 0.0005 * Math.cos(angle);
selectedLineGraphic[i].geometry.paths[0].push([selectedGraphics[i].geometry.x, selectedGraphics[i].geometry.y
])
}
var graphic = selectedGraphics[i].clone();
graphic.symbol.angle = graphic.attributes.direction - 90;
movelayer.add(graphic);
var lineGraphic = selectedLineGraphic[i].clone();
linemovelayer.add(lineGraphic);
}
if (movecounts == 50) {
movecounts = 0;
}
movecounts++;
}, 200);
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
static/view/demo/page-multilayer3search.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<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_3.x/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#controls {
position: absolute;
height: 100px;
font-family: arial;
bottom: 10px;
margin: 5px;
padding: 5px;
z-index: 40;
background: #fff;
color: #444;
width: 440px;
left: 10px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
h3 {
margin: 0 0 5px 0;
border-bottom: 1px solid #444;
}
.label {
display: inline-block;
width: 140px;
}
</style>
<script src="https://apaas.wodcloud.com/api_3.x/init.js"></script>
<script>
require([
"dojo/promise/all",
"esri/Color",
"dojo/_base/array",
"dojo/dom",
"dojo/on",
"esri/map",
"esri/toolbars/draw",
"esri/layers/WebTiledLayer",
"esri/layers/TileInfo",
"esri/geometry/Point",
"esri/geometry/Extent",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/graphic",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/query",
"esri/tasks/QueryTask",
"dojo/domReady!"
], function (
all, Color, arrayUtils, dom, on,
Map, Draw, WebTiledLayer, TileInfo, Point, Extent,
SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol, Graphic,
ArcGISDynamicMapServiceLayer,
Query, QueryTask
) {
var map = new Map('map', {
/*地图中心点*/
center: [0, 0],
/*地图默认缩放等级*/
zoom: 8,
/*地图最大缩放等级*/
maxZoom: 20,
/*地图最小缩放等级*/
minZoom: 2,
/*关闭logo*/
logo: false
});
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度 // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
var tileInfo = new TileInfo({
dpi: 90.71428571427429,
rows: 256,
cols: 256,
compressionQuality: 0,
origin: {
x: -180,
y: 90
},
spatialReference: {
wkid: 4326
},
lods: [{
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: 20,
resolution: 1.341104507446289075e-006,
scale: 563.616930119991375
}]
});
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
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
});
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
});
var queryLayer = new ArcGISDynamicMapServiceLayer(
"https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer");
map.addLayer(basemap);
map.addLayer(annomap);
map.addLayer(queryLayer);
map.centerAndZoom(new Point({
x: 106.720725933,
y: 26.5453458492,
spatialReference: {
wkid: 4326
}
}), 10);
initToolbar();
//新建查询任务与查询对象
var qtParcel1 = new QueryTask(
"https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/1");
var qParcel1 = new Query();
var qtArea = new QueryTask("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/10");
var qArea = new Query();
//设置查询是否返回几何对象
qParcel1.returnGeometry = qArea.returnGeometry = true;
qParcel1.outFields = qArea.outFields = ["*"];
function initToolbar() {
//新建绘图对象
tb = new Draw(map);
//监听绘制完成事件，将绘制的图形添加到地图中
tb.on("draw-end", addGraphic);
on(dom.byId("Extent"), "click", function (evt) {
//选择矩形框的画笔
var tool = evt.target.id.toLowerCase();
//绘制时，地图不移动
map.disableMapNavigation();
//激活画笔进行绘制
tb.activate(tool);
});
}
function addGraphic(evt) {
tb.deactivate();
map.enableMapNavigation();
var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])
);
map.graphics.add(new Graphic(evt.geometry, symbol));
executeQueries(evt);
}
function executeQueries(evt) {
var promise;
//空间查询，查询出几何要素内的所有要素
qParcel1.geometry = qArea.geometry = evt.geometry;
parcel1 = qtParcel1.execute(qParcel1);
area = qtArea.execute(qArea);
//异步处理两个查询
promises = all([parcel1, area]);
//完成后处理结果
promises.then(handleQueryResults);
}
function handleQueryResults(results) {
var parcel1, area;
for (var i; i < results.length; i++) {
if (!results[i].hasOwnProperty("features")) {
console.log("query failed.");
}
}
//两次查询的结果
parcel1 = results[0].features;
area = results[1].features;
map.graphics.clear();
arrayUtils.forEach(parcel1, function (feat) {
feat.setSymbol(
new SimpleMarkerSymbol()
.setColor(new Color([255, 0, 0, 1]))
.setSize("5")
);
map.graphics.add(feat);
});
arrayUtils.forEach(area, function (feat) {
feat.setSymbol(
new SimpleFillSymbol()
.setColor(new Color([255, 0, 0, 0.5]))
.setOutline(null)
);
map.graphics.add(feat);
});
dom.byId("results").innerHTML = "公安机构个数: " + parcel1.length + "个" +
"<br />贵阳市派出所辖区个数: " + area.length + "个";
}
});
</script>
</head>
<body class="tundra">
<div id="map">
<div id="controls">
<h3>多图层查询</h3>
<button id="Extent">开始进行拉框查询</button>
<div id="results">查询结果 </div>
</div>
</div>
</body>
</html>
static/view/demo/page-multilayer4search.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>multilayer search 4.</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#optionsDiv {
background-color: dimgray;
color: white;
padding: 5px;
width: 250px;
}
.esri-popup .esri-popup-header .esri-title {
font-size: 18px;
font-weight: bolder;
}
.esri-popup .esri-popup-body .esri-popup-content {
font-size: 14px;
}
</style>
<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>
require([
"dojo/promise/all",
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/layers/MapImageLayer",
"esri/layers/GraphicsLayer",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/tasks/FindTask",
"esri/tasks/support/FindParameters",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/geometry/Point",
"esri/geometry/SpatialReference",
"esri/Graphic",
], function (all, Map, Basemap, MapView, WebTileLayer, TileInfo, MapImageLayer, GraphicsLayer, QueryTask, Query,
FindTask, FindParameters, SimpleMarkerSymbol, SimpleFillSymbol, Point, SpatialReference, Graphic) {
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
},
});
polygonUrl = "https://apaasgis.wodcloud.com/server/rest/services/GZ_WGZTT/MapServer/0";
mapserverUrl = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer";
var pointSymbol = new SimpleMarkerSymbol({
style: "circle",
color: "blue",
size: "10"
});
var polygonSymbol = new SimpleFillSymbol({
color: [255, 0, 0, 0.5]
});
var popupTemplate = {
title: "{NAME}",
content: "<b>名称:</b> {NAME}"
};
var popupTemplate2 = {
title: "{名称}",
content: "<b>名称:</b> {名称}" +
"<br> <b>地址:</b> {地址}"
};
var resultsLayer = new GraphicsLayer();
var qTask = new QueryTask({
url: polygonUrl
});
var qTask2 = new FindTask({
url: mapserverUrl
});
var params = new Query({
returnGeometry: true,
outFields: ["*"]
});
var findparams = new FindParameters({
layerIds: [1],
searchFields: ["NAME"],
returnGeometry: true
});
var layer = new MapImageLayer({
url: mapserverUrl
});
// 创建地图
var map = new Map({
basemap: tdtBasemap,
layers: [resultsLayer, layer]
});
// 创建二维地图
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
center: [107, 27],
zoom: 9,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
popup: {
dockEnabled: true,
dockOptions: {
position: "top-right",
breakpoint: false
}
}
});
view.when(function () {
view.ui.add("optionsDiv", "top-right");
document.getElementById("doBtn").addEventListener("click", doQuery);
});
var value = document.getElementById("stateName");
function doQuery() {
resultsLayer.removeAll();
params.where =
"WGMC LIKE '%" + value.value + "%'";
findparams.searchText = value.value;
promise = all([qTask.execute(params), qTask2.execute(findparams)]);
promise
.then(getResults)
.catch(promiseRejected);
}
function getResults(results) {
if (!results[0].hasOwnProperty("features")) {
console.log("qtask query failed.");
}
var polygonResults = results[0].features.map(function (feature) {
feature.symbol = polygonSymbol;
feature.popupTemplate = popupTemplate;
return feature;
});
var pointResults = results[1].results.map(function (feature) {
var pt = new Point({
"x": feature.feature.geometry.x,
"y": feature.feature.geometry.y,
"spatialReference": new SpatialReference(4326)
});
var symbol = pointSymbol;
var attr = feature.feature.attributes;
var graphic = new Graphic(pt, symbol, attr);
graphic.popupTemplate = popupTemplate2;
return graphic;
});
resultsLayer.addMany(polygonResults);
resultsLayer.addMany(pointResults);
//移动地图到结果处
view.goTo(pointResults[0]).then(function () {
view.popup.open({
features: pointResults,
featureMenuOpen: true,
updateLocationEnabled: true
});
});
}
function promiseRejected(error) {
console.error("Promise rejected: ", error.message);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="esri-widget" id="optionsDiv">
<h2>查询名称</h2>
<input type="text" class="esri-widget" id="stateName" value="云岩">
<button class="esri-widget" id="doBtn">查询</button>
<br />
</div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-multilayersandfeilds_3search.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通用查询</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_3.x/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#optionsDiv {
position: absolute;
font-family: arial;
height: 25px;
right: 50px;
margin: 5px;
padding: 10px;
top: 10px;
width: 230px;
z-index: 40;
}
</style>
<script src="https://apaas.wodcloud.com/api_3.x/init.js"></script>
<script>
require([
"esri/map",
"esri/layers/WebTiledLayer",
"esri/layers/TileInfo",
"esri/geometry/Point",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/query", "esri/tasks/QueryTask",
"esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol", "esri/Color", "esri/dijit/PopupTemplate",
"dojo/domReady!"
], function (Map, WebTiledLayer, TileInfo, Point, ArcGISDynamicMapServiceLayer, Query, QueryTask,
Graphic, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color, PopupTemplate) {
// 创建地图，不设置底图，如果设置底图会造成坐标系无法被转换成 ESPG:4326 (WGS1984)
var map = new Map('map', {
/*地图中心点*/
center: [0, 0],
/*地图默认缩放等级*/
zoom: 8,
/*地图最大缩放等级*/
maxZoom: 20,
/*地图最小缩放等级*/
minZoom: 2,
/*关闭logo*/
logo: false
});
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度 // 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
var tileInfo = new TileInfo({
dpi: 90.71428571427429,
rows: 256,
cols: 256,
compressionQuality: 0,
origin: {
x: -180,
y: 90
},
spatialReference: {
wkid: 4326
},
lods: [{
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: 20,
resolution: 1.341104507446289075e-006,
scale: 563.616930119991375
}]
});
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
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
});
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
});
var queryLayer = new ArcGISDynamicMapServiceLayer(
"https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer");
map.addLayer(basemap);
map.addLayer(annomap);
map.addLayer(queryLayer);
// 设定中心点以及缩放级别，使地图的坐标系修正为 ESPG:4326 (WGS1984),否则地图坐标系为 ESPG:102100 也就是 Web墨卡托 投影的坐标系
// 如果希望设置地图中心点，以及缩放级别，请在此处设置，在新建地图时给出的坐标可以随意，但请不要和此处相同
map.centerAndZoom(new Point({
x: 106.720725933,
y: 26.5453458492,
spatialReference: {
wkid: 4326
}
}), 8);
var searchBtn = document.getElementById("doBtn");
searchBtn.addEventListener("click", doQuery);
document.onkeydown = function (e) {
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which;
if (code == 13) {
searchBtn.click();
}
}
var input = document.getElementById("inputText");
//每个图层查询的字段
var fields = [
["CATEGORYNAME", "REPORTORNAME", "ADDRESS", "DESCRIBE_"],
["NAME", "ADDRESS", "TYPE"],
["NAME", "ADRESS", "SSQY", "GXDWMC"],
["NAME", "ADRESS", "SSQY"],
["NAME"],
["LXMC"],
["LXMC"],
["LXMC"],
["LXMC"],
["WGMC"],
["PCSXQMC"],
["XQFJXQMC"],
["SZJXQMC"]
]
function doQuery() {
map.graphics.clear();
console.log(map.graphics);
map.infoWindow.hide();
var length = queryLayer.layerInfos.length;
if (!input.value) {
alert("输入不为空！");
return;
}
//遍历查询每一个图层
for (var i = 0; i < length; i++) {
var url = "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/" + i;
query = new Query();
query.outFields = fields[i];
query.where = buildWherePart(input.value, fields[i]);
query.returnGeometry = true;
var task = new QueryTask(url)
task.execute(query, getResults, errback)
}
}
function buildWherePart(txt, fields) {
if (txt && fields) {
var where = "1=1";
var wheres = [];
for (var i = 0; i < fields.length; i++) {
var field = fields[i];
if (field) {
wheres.push(field + " LIKE '%" + txt + "%'");
}
}
if (wheres.length > 0) {
where += " AND (";
for (var i = 0; i < wheres.length; i++) {
where += (i == 0) ? wheres[i] : " OR " + wheres[i];
}
where += ")";
}
return where;
}
return;
}
function getResults(results) {
if (results.features.length > 0) {
feature = results.features[0];
//根据查询结果的类型，创建不同的符号
switch (results.geometryType) {
case "esriGeometryPoint":
var symbol = new SimpleMarkerSymbol({
"color": [0, 0, 255, 255],
"size": 15
});
var pt = new Point(feature.geometry.x, feature.geometry.y)
break;
case "esriGeometryPolyline":
var symbol = new SimpleLineSymbol(
SimpleLineSymbol.STYLE_DASH,
new Color([0, 0, 255]),
8
);
var pt = new Point(feature.geometry.paths[0][0][0], feature.geometry.paths[0][0][1])
break;
case "esriGeometryPolygon":
var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])
);
var pt = new Point(feature.geometry.rings[0][0][0], feature.geometry.rings[0][0][1])
break;
}
//可视化查询结果，并绑定弹出窗口
for (var i = 0; i < results.features.length; i++) {
feature = results.features[i]
var content = ""
for (feild in results.fieldAliases) {
content += results.fieldAliases[feild] + "：" + feature.attributes[feild] + "<br>"
}
var infoTemplate = new PopupTemplate("");
infoTemplate.setTitle("详细信息");
infoTemplate.setContent(content);
map.graphics.add(new Graphic(feature.geometry, symbol, null, infoTemplate));
}
map.centerAndZoom(pt, 10)
}
}
//查询错误反馈
function errback(err) {
console.log("查询错误", err);
}
});
</script>
</head>
<body>
<div id="map"></div>
<div id="optionsDiv">
<input type="text" id="inputText" value="七十三警务室">
<button id="doBtn">查询</button>
</div>
</body>
</html>
static/view/demo/page-ol_load_geoserver_wmts.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>wmts_test</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/mapsamples/static/js/openlayer4.6.4/css/ol.css"
type="text/css">
<script src="https://apaas.wodcloud.com/mapsamples/static/js/openlayer4.6.4/ol.js"></script>
<style type="text/css">
body {
height: 100%;
}
html {
height: 100%;
}
#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#switchBaseMap {
position: fixed;
width: 50px;
height: 50px;
top: 20px;
left: 20px;
}
#switchBaseMap img {
width: auto;
height: auto;
}
#diqiu {
display: none;
}
#ditu {
display: block;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="switchBaseMap">
<img id="diqiu" src="../../images/diqiu.png" />
<img id="ditu" src="../../images/ditu.png" />
</div>
<script>
window.onload = function () {
function $(id) {
return document.getElementById(id);
}
//鼠标进
$("switchBaseMap").onmouseover = function () {
$("diqiu").style.display = "block";
$("ditu").style.display = "block";
}
//鼠标出
$("switchBaseMap").onmouseout = function () {
if ($("diqiu").style.display == "block") {
$("ditu").style.display = "none";
} else if ($("ditu").style.display == "block") {
$("diqiu").style.display = "none";
}
}
}
//点击ditu图标
document.getElementById("ditu").onclick = () => {
document.getElementById("ditu").style.display = "block";
document.getElementById("diqiu").style.display = "none";
tileLayer.setVisible(true);
ARCGISLAYER.setVisible(true);
gaodeMap.setVisible(false);
}
//点击diqiu图标
document.getElementById("diqiu").onclick = () => {
document.getElementById("ditu").style.display = "none";
document.getElementById("diqiu").style.display = "block";
tileLayer.setVisible(false);
ARCGISLAYER.setVisible(true);
gaodeMap.setVisible(true);
}
var matrixIds = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2',
'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6',
'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10',
'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14',
'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18'];
var resolutions = [0.703125, 0.3515625, 0.17578125,
0.087890625, 0.0439453125, 0.02197265625,
0.010986328125, 0.0054931640625, 0.00274658203125,
0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4,
1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5,
2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6,
2.682209014892578E-6]
var tilegrid = new ol.tilegrid.WMTS({
extent: [-180.0, -90.0, 180.0, 90.0],
tileSize: [256, 256],
origin: [-180.0, 90.0],
resolutions: resolutions,
matrixIds: matrixIds
});
var projection = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees',
axisOrientation: 'neu'
});
//广州给的wmts服务的图层
var tileSource = new ol.source.WMTS({
url: 'http://218.19.252.203:20052/geoserver/gwc/service/wmts',
layer: "chanzhou:jichutu",
format: "image/png",
matrixSet: "EPSG:4326",
projection: projection,
tileGrid: tilegrid
});
var tileLayer = new ol.layer.Tile({
opacity: 0.7,
source: tileSource,
wrapX: false,
});
//arcgisserver的图层
let url = "https://apaasgis.wodcloud.com/server/rest/services/SZ_POINT_TEST/MapServer";
let ARCGISLAYER = new ol.layer.Image({
source: new ol.source.ImageArcGISRest({
ratio: 1,
params: {},
url: url
})
})
//高德的图层
let gaodeMap = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
})
});
var View = new ol.View({
center: [114.05457, 22.54635],
projection: "EPSG:4326",
zoom: 12,
maxZoom: 18,
minZoom: 2
})
var map = new ol.Map({
layers: [tileLayer, gaodeMap, ARCGISLAYER],
view: View,
target: 'map',
});
</script>
</body>
</html>
\ No newline at end of file
static/view/demo/page-ol_tms_mapserver.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tiled ArcGIS MapServer</title>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<link rel="stylesheet" href="https://apaas.wodcloud.com/mapsamples/static/js/openlayer4.6.4/css/ol.css"
type="text/css">
<script src="https://apaas.wodcloud.com/mapsamples/static/js/openlayer4.6.4/ol.js"></script>
<style>
.map {
width: 100%;
height: 100%;
}
body {
height: 100%;
}
html {
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
const OSM = new ol.layer.Tile({
source: new ol.source.OSM()
})
//基础地图信息--开始
//设置坐标
let projectionBase = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees',
axisOrientation: 'neu'
});
//设置每一级别比例尺
let resolutionsBase = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125,
0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4,
1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5,
5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7
];
//设置origin
let originBase = [-180.0, -90.0];
let mCenterBase = [114.05457, 22.54635]; //地图中心点-经纬度坐标
// 地图范围
let fullExtentBase = [113.3619204711914, 22.15763153076172, 115.14614852905273, 23.1]; //原始范围
//创建地图图层
let BaseLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
tileGrid: new ol.tilegrid.TileGrid({
tileSize: 256,
origin: originBase,
maxExtent: fullExtentBase,
resolutions: resolutionsBase
}),
projection: projectionBase,
tileUrlFunction: function (xyz, obj1, obj2) {
let level = xyz[0]
let col = xyz[1]
let row = xyz[2]
let url =
"http://218.19.252.203:20240/geoserver/gwc/service/tms/1.0.0/shenzhen%3Ashenzhenwgb@EPSG%3A4326@png/" +
level + "/" + col + "/" + row + ".png";
return url;
}
})
})
let url = "https://apaasgis.wodcloud.com/server/rest/services/SZ_POINT_TEST/MapServer";
let ARCGISLAYER = new ol.layer.Image({
source: new ol.source.ImageArcGISRest({
ratio: 1,
params: {},
url: url
})
})
let GAODELAYER = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
})
});
let layers0 = [GAODELAYER, ARCGISLAYER]
let layers1 = [BaseLayer, ARCGISLAYER]
//基础地图信息--结束
let map = new ol.Map({
layers: layers0,
target: 'map',
view: new ol.View({
projection: 'EPSG:3857',
center: ol.proj.fromLonLat([114.05457, 22.54635]),
zoom: 12
})
});
let isGaode = true;
map.on("click", () => {
console.log("click");
console.log(map.getLayers());
if (isGaode) {
map.removeLayer(GAODELAYER)
map.removeLayer(ARCGISLAYER)
map.addLayer(BaseLayer)
map.addLayer(ARCGISLAYER)
} else {
map.removeLayer(BaseLayer)
map.removeLayer(ARCGISLAYER)
map.addLayer(GAODELAYER)
map.addLayer(ARCGISLAYER)
}
isGaode = !isGaode;
})
</script>
</body>
</html>
static/view/demo/page-peoplecluster.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>QueryTask</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#optionsDiv {
background-color: dimgray;
color: white;
padding: 10px;
width: 350px;
}
.esri-popup .esri-popup-header .esri-title {
font-size: 18px;
font-weight: bolder;
}
.esri-popup .esri-popup-body .esri-popup-content {
font-size: 14px;
}
</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/api_4.x/init.js"></script>
<script>
require([
"esri/Map",
"esri/Graphic",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/geometry/Point",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/geometry/SpatialReference",
"esri/layers/VectorTileLayer",
"esri/symbols/PictureMarkerSymbol",
"esri/tasks/QueryTask",
"esri/tasks/support/Query"
], function (Map, Graphic, Basemap, MapView, WebTileLayer, TileInfo, Point, FeatureLayer, GraphicsLayer,
SpatialReference, VectorTileLayer, PictureMarkerSymbol, QueryTask, Query) {
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 popupTemplate = {
title: "{BUS_REPORTORNAME}, {BUS_ADDRESS} ",
fieldInfos: [{
fieldName: "st_name",
label: "站点名称",
format: {
places: 0,
digitSeperator: true
}
}],
content: "</b> <b> 姓名： <b> {BUS_REPORTORNAME}" +
"<br><b>地址 ：</b> {BUS_ADDRESS}" +
"<br><b>时间 : {BUS_HAPPENTIME}" +
"</b> {BUS_DESCRIBE} "
};
var stationUrl = "https://apaasgis.wodcloud.com/arcgis/rest/services/TRACK_DEMO/FeatureServer/0"
var resultsLayer = new GraphicsLayer();
var weatherstation = new FeatureLayer({
url: stationUrl
});
var qTask = new QueryTask({
url: stationUrl
});
var params = new Query({
returnGeometry: true,
outFields: ["*"]
});
var map = new Map({
basemap: tdtBasemap,
layers: [weatherstation, resultsLayer]
});
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
center: [109, 38],
zoom: 6,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
popup: { //弹框默认的位置
dockEnabled: true,
dockOptions: {
position: "top-right",
breakpoint: false
}
}
});
view.when(function () {
view.ui.add("optionsDiv", "bottom-right");
document.getElementById("doBtn").addEventListener("click", doQuery);
});
var trac_catalog = document.getElementById("valSelect");
function doQuery() {
resultsLayer.removeAll();
params.where = "BUS_CATEGORYNAME='" + trac_catalog.value + "'";
qTask
.execute(params)
.then(getResults)
.catch(promiseRejected);
}
function getResults(response) {
var peakResults = response.features.map(function (feature) {
var pt = new Point({
"x": feature.geometry.x,
"y": feature.geometry.y,
"spatialReference": new SpatialReference(4326)
});
var symbol = new PictureMarkerSymbol("/images/marker-red.png", 26, 37);
var attr = {
"BUS_CATEGORYNAME": feature.attributes.BUS_CATEGORYNAME,
"BUS_HAPPENTIME": feature.attributes.BUS_HAPPENTIME,
"BUS_REPORTTIME": feature.attributes.BUS_REPORTTIME,
"BUS_REPORTORNAME": feature.attributes.BUS_REPORTORNAME,
"BUS_ADDRESS": feature.attributes.BUS_ADDRESS,
"BUS_DESCRIBE": feature.attributes.BUS_DESCRIBE
};
var graphic = new Graphic(pt, symbol, attr);
graphic.popupTemplate = popupTemplate;
return graphic;
});
resultsLayer.addMany(peakResults);
view.goTo(peakResults).then(function () {
view.popup.open({
features: peakResults,
featureMenuOpen: true,
updateLocationEnabled: true
});
});
document.getElementById("printResults").innerHTML =
peakResults.length + " results found!";
}
function promiseRejected(error) {
console.error("Promise rejected: ", error.message);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="esri-widget" id="optionsDiv">
<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>
<option value="网吧">网吧</option>
</select>
<br><br>
<button class="esri-widget" id="doBtn">检索</button> <br />
<h2>过滤条件</h2>
<p><span id="printResults"></span></p>
</div>
</body>
</html>
static/view/demo/page-pointshine_map.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Point Shine Map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#paneDiv {
position: absolute;
bottom: 0;
width: 100%;
padding: 20px 0;
z-index: 1;
text-align: center;
}
button {
background: white;
padding: 7px;
border: 1px solid #005e95;
font-size: 0.9em;
margin: 5px;
color: #005e95;
}
button:hover {
background: #005e95;
color: white;
cursor: pointer;
}
.operatePanel {
position: absolute;
top: 0px;
right: 0px;
width: 130px;
height: 100px;
border: 1px solid #0d1721;
background: #ffffff;
}
</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/api_4.x/init.js"></script>
<script>
$(function () {
require([
"esri/Map",
"esri/WebScene",
"esri/geometry/Point",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/layers/FeatureLayer"
], function (Map, WebScene, Point, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
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 wglayer = new FeatureLayer({
url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/9"
});
// 创建地图
var map = new Map({
basemap: tdtBasemap,
layers: [wglayer]
});
// 创建二维地图
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
center: [106.7, 26.6],
zoom: 13,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
popup: {
dockEnabled: true,
dockOptions: {
position: "top-right",
breakpoint: false
}
},
highlightOptions: {
color: [255, 0, 0],
fillOpacity: 1
},
environment: {
atmosphereEnabled: true,
atmosphere: {
quality: "high"
}
}
});
var highlightSelect, highlightHover;
var 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++) {
button.addEventListener("click", onClick);
button.addEventListener("mouseover", onMouseOver);
button.addEventListener("mouseout", onMouseOut);
}
function onClick(event) {
queryStations.where = "WGMC LIKE'%" + event.target.innerText + "%'";
stationLayer.queryFeatures(queryStations).then(function (result) {
console.log(result);
if (highlightSelect) {
highlightSelect.remove();
}
highlightSelect = layerView.highlight(result.features);
});
}
function onMouseOver(event) {
queryStations.where = "WGMC LIKE　'%" + event.target.innerText + "%'";
hoverPromise = stationLayer.queryFeatures(queryStations);
hoverPromise.then(function (result) {
if (highlightHover) {
highlightHover.remove();
}
highlightHover = layerView.highlight(result.features);
});
}
function onMouseOut(event) {
hoverPromise.cancel();
if (highlightHover) {
highlightHover.remove();
}
}
});
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="paneDiv">
<h3>站点选择</h3>
<button>观山</button> <button>经开</button>
<button>云岩</button> <button>南明</button>
</div>
</body>
</html>
static/view/demo/page-simplesearch.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>simple search</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%;
}
#optionsDiv {
background-color: dimgray;
color: white;
padding: 5px;
width: 250px;
}
.esri-popup .esri-popup-header .esri-title {
font-size: 18px;
font-weight: bolder;
}
.esri-popup .esri-popup__footer {
visibility: hidden;
}
.esri-popup .esri-popup-body .esri-popup-content {
font-size: 14px;
}
</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",
"esri/layers/GraphicsLayer",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/symbols/SimpleMarkerSymbol",
"esri/geometry/Point"
], function (Map, Basemap, MapView, WebTileLayer, TileInfo, GraphicsLayer, QueryTask, Query, SimpleMarkerSymbol, Point) {
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 peaksUrl =
"https://apaasgis.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer/2";
var pointSymbol = new SimpleMarkerSymbol({
style: "circle",
color: "blue",
size: "8px"
});
var popupTemplate = {
title: "{NAME}",
content: "<b>名称:</b> {NAME}" +
"<br><b>地址:</b> {ADDRESS}"
};
var resultsLayer = new GraphicsLayer();
var qTask = new QueryTask({
url: peaksUrl
});
var params = new Query({
returnGeometry: true,
outFields: ["*"]
});
var map = new Map({
basemap: tdtBasemap,
layers: [resultsLayer]
});
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
center: [107, 27],
zoom: 9,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
popup: {
dockEnabled: true,
dockOptions: {
position: "top-right",
breakpoint: false
}
}
});
view.when(function () {
view.ui.add("optionsDiv", "top-right");
document.getElementById("doBtn").addEventListener("click", doQuery);
});
var value = document.getElementById("stateName");
function doQuery() {
resultsLayer.removeAll();
params.where =
"NAME=" + "'" + value.value + "'";
qTask
.execute(params)
.then(getResults)
.catch(promiseRejected);
}
function getResults(response) {
var peakResults = response.features.map(function (feature) {
feature.symbol = pointSymbol;
feature.popupTemplate = popupTemplate;
return feature;
});
resultsLayer.addMany(peakResults);
var pt = new Point({
latitude: peakResults[0].geometry.y,
longitude: peakResults[0].geometry.x
});
view.goTo(pt);
view.popup.open({
features: peakResults,
featureMenuOpen: true,
location: pt
});
document.getElementById("printResults").innerHTML =
peakResults.length + " results found!";
}
function promiseRejected(error) {
console.error("Promise rejected: ", error.message);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="esri-widget" id="optionsDiv">
<h2>查询名称</h2>
<input type="text" class="esri-widget" id="stateName" value="青岩古镇">
<button class="esri-widget" id="doBtn">查询</button>
<br />
<p><span id="printResults"></span></p>
</div>
</body>
</html>
static/view/demo/page-sliderZoom.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<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" />
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#zoom {
height: 27px;
width: 200px;
}
#zoom-value {
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<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([
"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://{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
});
// 创建二维地图
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 12,
constraints: {
lods: tileInfo.lods,
snapToZoom: true,
minZoom: 3,
maxZoom: 18
},
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;
view.ui.add("optionsDiv", "top-left");
view.ui.add("zoom-value", "top-left");
zoomSlider.addEventListener("input", function () {
showZoom.innerText = zoomSlider.value;
});
zoomSlider.addEventListener("change", function () {
view.zoom = zoomSlider.value
});
view.watch("zoom", function () {
zoomSlider.value = view.zoom
showZoom.innerText = parseInt(view.zoom)
});
})
})
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="esri-widget" id="optionsDiv">
&nbsp;<input id="zoom" type="range" orient="vertical" min="3" max="18" step="1" value="18" />&nbsp;
</div>
<div class="esri-widget" id="zoom-value">
<span>18</span>
</div>
</body>
</html>
static/view/demo/page-tdt_wmts_map.html 0 → 100644
View file @ cb7659f4
<!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://{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
});
// 创建二维地图
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-test.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geoserver TMS</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/mapsamples/static/js/ol4.6.5/ol.css" type="text/css">
<script src="https://apaas.wodcloud.com/mapsamples/static/js/ol4.6.5/ol.js"></script>
<script src="http://mapv.baidu.com/build/mapv.min.js"></script>
<style>
.map {
width: 100%;
height: 100%;
}
body {
height: 100%;
}
html {
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
let GAODELAYER = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
})
});
let layers1 = [GAODELAYER]
//基础地图信息--结束
let map = new ol.Map({
layers: layers1,
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
//center: ol.proj.fromLonLat([114.05457, 22.54635]),
center: [114.05457, 22.54635],
zoom: 12
})
});
// 构造mapv的图层
var lineLayer = new mapv.OpenlayersLayer(map, dataSet, options);
</script>
</body>
</html>
\ No newline at end of file
static/view/demo/page-test2.html 0 → 100644
View file @ cb7659f4
<!--********************************************************************
* Copyright© 2000 - 2019 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_WMTSLayer"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
<script type="text/javascript" src="../../dist/openlayers/include-openlayers.js"></script>
</head>
<style type="text/css">
body {
height: 100%;
}
html {
height: 100%;
}
#map {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript">
// var resolutions = new Array(20);
// var matrixIds = new Array(20);
// for (var z = 0; z < 20; ++z) {
// resolutions[z] = 0.703125 / Math.pow(2, z);
// matrixIds[z] = z;
// }
var resolutions = new Array(17);
var matrixIds = new Array(17);
for (var z = 0; z < 17; ++z) {
resolutions[z] = 156543.033928041 / Math.pow(2, z);
matrixIds[z] = z;
}
// var map = new ol.Map({
// target: 'map',
// controls: ol.control.defaults({ attributionOptions: { collapsed: false } })
// .extend([new ol.supermap.control.Logo()]),
// view: new ol.View({
// center: [106.72, 26.585],
// zoom: 10,
// projection: "EPSG:4326",
// }),
// layers: [new ol.layer.Tile({
// opacity: 0.7,
// //spatialReference: projectionBase,
// source: new ol.source.WMTS({
// url: (window.isLocal ? window.server : "http://jgsw.gy.wodcloud.com") + "/iserver/services/map-guizhou/wmts-china",
// layer: 'guizhou',
// matrixSet: 'ChinaPublicServices_guizhou',
// format: 'image/png',
// tileGrid: new ol.tilegrid.WMTS({
// //origin: [-2.0037508342787E7, 2.0037508342787E7],
// origin: [-180, 90],
// //origin: [11864178.63,508342787E7, 2.0037508342787E7, 2.0037508342787E7],
// extend: [103.72713192, 24.71038704, 109.46254608, 29.08170198],
// resolutions: resolutions,
// matrixIds: matrixIds
// }),
// style: 'default',
// attributions: new ol.Attribution({
// html: "Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>"
// })
// })
// }),
// new ol.layer.Image({
// source: new ol.source.ImageArcGISRest({
// ratio: 1,
// params: {},
// url: "https://apaasgis-zw.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer"
// })
// })]
// });
var map = new ol.Map({
target: 'map',
controls: ol.control.defaults({ attributionOptions: { collapsed: false } })
.extend([new ol.supermap.control.Logo()]),
view: new ol.View({
center: [0, 0],
zoom: 0,
}),
layers: [new ol.layer.Tile({
opacity: 0.7,
source: new ol.source.WMTS({
url: (window.isLocal ? window.server : "http://support.supermap.com.cn:8090") + "/iserver/services/map-china400/wmts100",
layer: 'China',
matrixSet: 'GoogleMapsCompatible_China',
format: 'image/png',
tileGrid: new ol.tilegrid.WMTS({
origin: [-2.0037508342787E7, 2.0037508342787E7],
extent: [-2.0037508342787E7, -2.0037508342787E7, 2.0037508342787E7, 2.0037508342787E7],
resolutions: resolutions,
matrixIds: matrixIds
}),
style: 'default',
attributions: new ol.Attribution({
html: "Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>"
})
})
}),
new ol.layer.Image({
source: new ol.source.ImageArcGISRest({
ratio: 1,
params: {},
url: "https://apaasgis-zw.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer"
})
})
]
});
</script>
</body>
</html>
\ No newline at end of file
static/view/demo/page-test3.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>mapV</title>
<!-- <link href="../script/ol4/ol.css" rel="stylesheet" />
<script src="../script/ol4/ol.js"></script> -->
<link rel="stylesheet" href="https://apaas.wodcloud.com/mapsamples/static/js/ol4.6.5/ol.css" type="text/css">
<script src="https://apaas.wodcloud.com/mapsamples/static/js/ol4.6.5/ol.js"></script>
<script src="http://mapv.baidu.com/build/mapv.min.js"></script>
<script src="../../js/jquery-3.3.1.min.js"></script>
<style type="text/css">
body,
#map {
border: 0px;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-size: 13px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var projection = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees'
});
function getNavmapLayer() {
return new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'//7,8
}),
projection: projection
});
}
var navlayer = getNavmapLayer();
map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}),
target: 'map',
layers: [navlayer],
view: new ol.View({
projection: projection,
center: [116.456, 40.251],
zoom: 4
})
});
var coordinate = [116.456, 40.251];
$.get('../../data/egisData/china.json', function (geojson) {
var geojsonOptions = {
gradient: {
0: 'rgba(55, 50, 250, 0.4)',
1: 'rgba(55, 50, 250, 1)'
},
max: 354551,
draw: 'intensity'
}
var geojsonDataSet = mapv.geojson.getDataSet(geojson);
var to = '北京';
var qianxi = new mapv.DataSet([
{
from: '河北',
count: 354551,
to: to,
},
{
from: '天津',
count: 97323,
to: to,
},
{
from: '山东',
count: 28664,
to: to,
},
{
from: '山西',
count: 16650,
to: to,
},
{
from: '辽宁',
count: 14379,
to: to,
},
{
from: '河南',
count: 10980,
to: to,
},
{
from: '内蒙古自治区',
count: 9603,
to: to,
},
{
from: '江苏',
count: 4536,
to: to,
},
{
from: '上海',
count: 3556,
to: to,
},
{
from: '广东',
count: 2600,
to: to,
},
]);
var qianxiData = qianxi.get();
var lineData = [];
var pointData = [];
var textData = [];
var timeData = [];
var citys = {}
for (var i = 0; i < qianxiData.length; i++) {
var fromCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i].from);
var toCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i].to);
if (!fromCenter || !toCenter) {
continue;
}
citys[qianxiData[i].from] = qianxiData[i].count;
citys[qianxiData[i].to] = 100;
pointData.push(
{
geometry: {
type: 'Point',
coordinates: [fromCenter.lng, fromCenter.lat]
}
}
);
pointData.push(
{
geometry: {
type: 'Point',
coordinates: [toCenter.lng, toCenter.lat]
}
}
);
textData.push(
{
geometry: {
type: 'Point',
coordinates: [fromCenter.lng, fromCenter.lat]
},
text: qianxiData[i].from
}
);
textData.push(
{
geometry: {
type: 'Point',
coordinates: [toCenter.lng, toCenter.lat]
},
text: qianxiData[i].to
}
);
var curve = mapv.utilCurve.getPoints([fromCenter, toCenter]);
for (j = 0; j < curve.length; j++) {
timeData.push({
geometry: {
type: 'Point',
coordinates: curve[j]
},
count: 1,
time: j
});
}
lineData.push({
geometry: {
type: 'LineString',
coordinates: curve
//coordinates: [[fromCenter.lng, fromCenter.lat], [toCenter.lng, toCenter.lat]]
},
count: 30 * Math.random()
});
}
var data = geojsonDataSet.get({
filter: function (item) {
if (!citys[item.name]) {
return false;
}
item.count = citys[item.name];
return true;
}
});
geojsonDataSet = new mapv.DataSet(data);
var mapvLayer = new mapv.OpenlayersLayer(map, geojsonDataSet, geojsonOptions);
var textDataSet = new mapv.DataSet(textData);
var textOptions = {
draw: 'text',
font: '14px Arial',
fillStyle: 'white',
shadowColor: 'yellow',
shadowBlue: 10,
zIndex: 11,
shadowBlur: 10
}
var textMapvLayer = new mapv.OpenlayersLayer(map, textDataSet, textOptions);
var lineDataSet = new mapv.DataSet(lineData);
var lineOptions = {
strokeStyle: 'rgba(255, 250, 50, 0.8)',
shadowColor: 'rgba(255, 250, 50, 1)',
shadowBlur: 20,
lineWidth: 2,
zIndex: 100,
draw: 'simple'
}
var lineLayer = new mapv.OpenlayersLayer(map, lineDataSet, lineOptions);
var pointOptions = {
fillStyle: 'rgba(254,175,3,0.7)',
shadowColor: 'rgba(55, 50, 250, 0.5)',
shadowBlur: 10,
size: 5,
zIndex: 10,
draw: 'simple'
}
var pointDataSet = new mapv.DataSet(pointData);
var pointLayer = new mapv.OpenlayersLayer(map, pointDataSet, pointOptions);
var timeDataSet = new mapv.DataSet(timeData);
console.log(timeData);
var timeOptions = {
fillStyle: 'rgba(255, 250, 250, 0.5)',
zIndex: 200,
size: 2.5,
animation: {
type: 'time',
stepsRange: {
start: 0,
end: 50
},
trails: 10,
duration: 2,
},
draw: 'simple'
}
var mapvLayer = new mapv.OpenlayersLayer(map, timeDataSet, timeOptions);
});
</script>
</body>
</html>
\ No newline at end of file
static/view/demo/page-video_web_map.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Portal Web Map</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%;
}
.esri-view-width-xlarge .esri-popup__main-container {
width: 505px;
}
.esri-view-height-xlarge .esri-popup__main-container {
max-height: none;
}
.esri-popup__main-container {
max-height: none;
}
</style>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/config",
"esri/views/MapView",
"esri/WebMap"
], function(esriConfig, MapView, WebMap) {
esriConfig.portalUrl = "https://apaasgis.wodcloud.com/portal";
var webmap = new WebMap({
portalItem: {
id: "4731db60e99b47c3aed258d488963986"
}
});
var view = new MapView({
map: webmap,
container: "viewDiv"
});
view.when(function() {
view.popup.watch("selectedFeature", function(graphic) {
if (graphic && graphic.sourceLayer) {
var layerName = graphic.sourceLayer.title;
switch (layerName) {
case "贵州视频监控要素微服务":
var name = graphic.attributes.NAME;
var code = graphic.attributes.CODE;
var mycontent = setContentInfo(code);
openpopup(name, code, mycontent);
break;
}
function openpopup(name, code, mycontent) {
view.popup.open({
title: name + "(" + code + ")",
content: mycontent,
location: graphic.geometry
});
}
}
});
});
function setContentInfo(code) {
var videoDomain = "https://dl.wodcloud.com/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 +
"&width=476&height=314' name='cameraiframe' frameborder='0' style='width: 476px;height: 314px; overflow: hidden; border:0px;'></iframe>";
};
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-webmap_test.html 0 → 100644
View file @ cb7659f4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>WebMap TEST</title>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#viewDiv {
position: absolute;
right: 0;
left: 0;
top: 60px;
bottom: 0;
}
.header {
position: absolute;
top: 0;
width: 100%;
height: 10%;
}
.btns {
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: auto;
}
.btn-switch {
flex-grow: 4;
background-color: rgba(34, 111, 14, 0.5);
color: #fff;
margin: 1px;
width: 50%;
padding: 20px;
overflow: auto;
text-align: center;
cursor: pointer;
}
.active-map {
color: #fff;
background-color: rgba(34, 111, 14, 1);
}
</style>
<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>
require(["esri/config", "esri/views/MapView", "esri/WebMap", "esri/widgets/LayerList", "esri/widgets/BasemapToggle", "esri/renderers/smartMapping/creators/heatmap", "esri/layers/FeatureLayer", "esri/layers/GraphicsLayer"], function (esriConfig, MapView, WebMap, LayerList, BasemapToggle, heatmapRendererCreator, FeatureLayer, GraphicsLayer) {
esriConfig.portalUrl = "https://apaasgis.wodcloud.com/arcgis";
var webmapids = [
"f329af1e6e05490fa44cc0104c5a89ef",
"54a708b3890a4d1aaff37988697aeaec",
];
/************************************************************
* Create multiple WebMap instances
************************************************************/
var webmaps = webmapids.map(function (webmapid) {
return new WebMap({
portalItem: {
// autocasts as new PortalItem()
id: webmapid
}
});
});
console.log(webmaps);
/************************************************************
* Initialize the View with the first WebMap
************************************************************/
var view = new MapView({
map: webmaps[0],
container: "viewDiv"
});
var list = new LayerList({
view: view,
});
view.ui.add(
new LayerList({
view: view
}), "top-right");
// console.log(list);
var basemapToggle = new BasemapToggle({
view: view, // view that provides access to the map's 'topo' basemap
nextBasemap: "gray" // allows for toggling to the 'hybrid' basemap
});
// Add widget to the top right corner of the view
view.ui.add(basemapToggle, "bottom-right");
var foundLayer = webmaps[0].allLayers.find(function (layer) {
console.log(layer);
return layer.title === "旅游景区要素微服务 - 5A景区";
});
view.map.load()
.then(function () {
// load the basemap to get its layers created
return view.map.basemap.load();
})
.then(function () {
// grab all the layers and load them
var allLayers = view.map.allLayers;
var promises = allLayers.map(function (layer) {
return layer.load();
});
return Promise.all(promises.toArray());
})
.then(function (layers) {
var fl1 = layers.find(function (layer) {
return layer.title === "旅游景区要素微服务 - 3A景区";
});
var renderer = {
type: "heatmap",
colorStops: [
{ color: "rgba(0, 0, 255, 0)", ratio: 0 },
{ color: "royalblue", ratio: 0.1 },
{ color: "cyan", ratio: 0.3 },
{ color: "lime", ratio: 0.5 },
{ color: "yellow", ratio: 0.7 },
{ color: "red", ratio: 1 }
],
maxPixelIntensity: 25,
minPixelIntensity: 0
};
fl1.renderer = renderer;
var fl2 = layers.find(function (layer) {
return layer.title === "旅游景区要素微服务 - 4A景区";
});
fl1.title = "3A景区"
view.map.layers.add(fl1);
view.map.layers.remove(fl2);
var fl = new FeatureLayer({ url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_APAASZTT/FeatureServer/1", title: "摄像头图层" });
var gl = new GraphicsLayer({title:"绘制图层"});
view.map.add(fl, 2);
view.map.add(gl);
// each layer load promise resolves with the layer
console.log("all " + layers.length + " layers loaded");
})
.catch(function (error) {
console.error(error);
});
document
.querySelector(".btns")
.addEventListener("click", function (event) {
/************************************************************
* On a button click, change the map of the View
************************************************************/
var id = event.target.getAttribute("data-id");
if (id) {
var webmap = webmaps[id];
view.map = webmap;
var nodes = document.querySelectorAll(".btn-switch");
for (var idx = 0; idx < nodes.length; idx++) {
var node = nodes[idx];
var mapIndex = node.getAttribute("data-id");
if (mapIndex === id) {
node.classList.add("active-map");
} else {
node.classList.remove("active-map");
}
}
}
});
});
</script>
</head>
<body>
<section class="header esri-widget">
<div class="btns">
<div class="btn-switch active-map" data-id="0">旅游</div>
<div class="btn-switch" data-id="1">视频</div>
</div>
</section>
<div id="viewDiv" class="esri-widget"></div>
</body>
</html>
\ No newline at end of file
yarn.lock
View file @ cb7659f4
......@@ -2144,7 +2144,7 @@ coa@^2.0.2:
chalk "^2.4.1"
q "^1.1.2"
codemirror@^5.45.0:
codemirror@^5.41.0, codemirror@^5.58.2:
version "5.58.2"
resolved "https://registry.npm.taobao.org/codemirror/download/codemirror-5.58.2.tgz#ed54a1796de1498688bea1cdd4e9eeb187565d1b"
integrity sha1-7VSheW3hSYaIvqHN1OnusYdWXRs=
......@@ -2842,6 +2842,11 @@ detect-node@^2.0.4:
resolved "https://registry.npm.taobao.org/detect-node/download/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
integrity sha1-AU7o+PZpxcWAI9pkuBecCDooxGw=
diff-match-patch@^1.0.0:
version "1.0.5"
resolved "https://registry.npm.taobao.org/diff-match-patch/download/diff-match-patch-1.0.5.tgz?cache=0&sync_timestamp=1600349125335&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdiff-match-patch%2Fdownload%2Fdiff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37"
integrity sha1-q7WE1fEM0Rlt/FWqA3AVkq4/ezc=
diffie-hellman@^5.0.0:
version "5.0.3"
resolved "https://registry.npm.taobao.org/diffie-hellman/download/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
......@@ -7656,6 +7661,14 @@ vm-browserify@^1.0.1:
resolved "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz?cache=0&sync_timestamp=1572870837170&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvm-browserify%2Fdownload%2Fvm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
integrity sha1-eGQcSIuObKkadfUR56OzKobl3aA=
vue-codemirror@^4.0.6:
version "4.0.6"
resolved "https://registry.npm.taobao.org/vue-codemirror/download/vue-codemirror-4.0.6.tgz#b786bb80d8d762a93aab8e46f79a81006f0437c4"
integrity sha1-t4a7gNjXYqk6q45G95qBAG8EN8Q=
dependencies:
codemirror "^5.41.0"
diff-match-patch "^1.0.0"
vue-cropper@^0.5.2:
version "0.5.5"
resolved "https://registry.npm.taobao.org/vue-cropper/download/vue-cropper-0.5.5.tgz?cache=0&sync_timestamp=1594808353939&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-cropper%2Fdownload%2Fvue-cropper-0.5.5.tgz#9bd1ba563c7faa268abd52fb2af4c6c28d33c962"
......
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