123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346 |
- <template>
- <vl-map
- class-name="overview-map"
- :map.sync="map"
- projection="EPSG:4490"
- @loaded="mapLoaded"
- >
- <vl-china-cities :enabled="false" @pick="(fea) => (feature = fea)" />
- <vl-map-dev-info
- :top="140"
- :show-panel="false"
- @info-update="(v) => (viewInfo = v)"
- />
- <vl-config-layers
- ref="configLayer"
- :layers-config="layersConfig"
- :visible-layer-ids="realLayers"
- @loaded="configLayerLoaded"
- />
- <vl-tool-bar :height="34" :radius="4">
- <vl-tool-bar-item
- no-padding
- class="tool-box"
- style="width: 110px !important;color: #FFF"
- >
- <vl-tool-box
- ref="toolBox"
- :enable-scope-sketch="false"
- @drawend="drawend"
- style="width: 110px"
- />
- </vl-tool-bar-item>
- <vl-tool-bar-item
- no-padding
- style="margin-left: 10px;"
- v-show="layerShow"
- title="图层"
- >
- <vl-layer-tree :enabled-layers="enabledLayersConfig" />
- </vl-tool-bar-item>
- </vl-tool-bar>
- <vl-legend
- :size="40"
- :legend-fill="0.4"
- :enabled-layers="enabledLayersConfig"
- :default-expand="defaultExpand"
- v-if="legendShow"
- />
- <VlImglayers
- :imgLayers="imgLayers"
- @change="vlImgLayerChangeHandle"
- @change1="vlImgLayerChangeHandle1"
- @sliderChange="vlImgLayerSliderChangeHandle"
- @sliderChange1="vlImgLayerSliderChangeHandle1"
- >
- </VlImglayers>
- <vl-feature-flicker
- :feature="feature"
- new-layer
- :duration="2400"
- :interval="800"
- />
- <!-- 详情 -->
- <vl-feature-overlay
- v-show="overlayShow"
- :feature="feature"
- :use-centroid="false"
- no-styled
- >
- <template slot-scope="{ props }" v-if="detailType != 0">
- <div class="overlayBox">
- <span class="title" v-if="detailType == 1 || detailType == 2"
- >详情<a class="btn" @click="showLandDetail(props)">详情</a></span
- >
- <span class="title" v-if="detailType == 4 || detailType == 5"
- >详情<a
- v-if="detailType == 6"
- class="btn"
- @click="mockDetail(props)"
- >要素配置模拟</a
- ></span
- >
- <span
- class="title"
- v-if="
- (detailType == 5 && tzzxShow) || (detailType == 33 && tzzxShow)
- "
- >详情<a class="btn" @click="tzzxDetail(props)">提质增效</a></span
- >
- <span class="title" v-if="detailType == 10 || detailType == 11"
- >详情<a class="btn" @click="showSpDetail(props)">更多</a></span
- >
- <span
- class="title"
- v-if="
- detailType == 13 ||
- detailType == 14 ||
- detailType == 15 ||
- detailType == 16 ||
- detailType == 33
- "
- >详情</span
- >
- <span class="title" v-if="detailType == 12"
- >详情<a class="btn" @click="locationTsxzDetail(props)"
- >详情</a
- ></span
- >
- <span
- class="title"
- v-if="
- detailType == 20 ||
- detailType == 21 ||
- detailType == 22 ||
- detailType == 23 ||
- detailType == 24 ||
- detailType == 25 ||
- detailType == 26 ||
- detailType == 27 ||
- detailType == 31 ||
- detailType == 100
- "
- >详情<a class="btn" @click="skyb(props)">时空演变</a></span
- >
- <span class="title" v-if="detailType == 101"
- >控规详情<a class="btn" @click="skyb(props)">时空演变</a></span
- >
- <span class="title" v-if="detailType == 32"
- >详情<a
- v-if="detailType == 32"
- class="btn"
- @click="bjmockDetail(props)"
- >要素配置模拟</a
- ></span
- >
- <span class="title" v-if="detailType == 50 || detailType == 51">
- 详情
- </span>
- <span class="title" v-if="detailType == 99">
- 详情
- <a class="label" v-show="props['dksyh']">工业用地</a>
- <a
- class="label"
- v-show="props['tdyt'] && props['tdyt'].startsWith('07')"
- >住宅用地</a
- >
- <a
- class="label"
- v-show="props['tdyt'] && props['tdyt'].startsWith('0803')"
- >教育用地</a
- >
- <a class="label" v-show="props['新增调查地']">商业用地</a>
- <a class="label" v-show="props['spmj']">临时用地</a>
- </span>
- <div class="content" v-if="detailType == 1">
- <h2>{{ props["KFQMC"] }}</h2>
- <p>总面积:{{ Number(props["开发区评价面积"]).toFixed(0) }}公顷</p>
- <p>管理机构:{{ props["开发区管理机构"] }}</p>
- <p>地块位置:{{ props["开发区四至范围"] }}</p>
- </div>
- <div class="content" v-if="detailType == 2">
- <h2>{{ props["TDQLR"] }}</h2>
- <p>总面积:{{ Number(props["SJYDMJ"] * 0.0015).toFixed(2) }}亩</p>
- <p>容积率:{{ props["SJRJL"].toFixed(1) }}</p>
- <p>税收总额:{{ props["SJSF2020"].toFixed(1) }}万元</p>
- </div>
- <div class="content" v-if="detailType == 4 || detailType == 6">
- <h2>{{ props["dkbh"] }}</h2>
- <p>总面积:{{ Number(props["mj"] * 15).toFixed(2) }}亩</p>
- <p>批复文号:{{ props["pfwh"] }}</p>
- <p>规划单元:{{ props["ghdy"] }}</p>
- </div>
- <div class="content" v-if="detailType == 5">
- <h2>{{ props["TDQLR"] }}</h2>
- <p>总面积:{{ Number(props["SJYDMJ"] * 0.0015).toFixed(2) }}亩</p>
- <p>亩均税收:{{ Number(props["mjss"]).toFixed(2) }}万元/亩</p>
- <p>行业类别:{{ props["HYLB"] }}</p>
- <p>土地坐落:{{ props["TDZL"] }}</p>
- </div>
- <div class="content" v-if="detailType == 10">
- <h2>{{ props["xmmc"] }}</h2>
- <p>行政区:{{ props["szs"] || props["sxs"] }}</p>
- <!-- <p>面积:{{props['sjydmj']}}</p>-->
- <p>项目类型:{{ props["xmlx"] }}</p>
- </div>
- <div class="content" v-if="detailType == 11">
- <h2>{{ props["xmmc"] }}</h2>
- <p>行政区:{{ props["xzqmc"] }}</p>
- <p>面积:{{ props["ydmj"] }}亩</p>
- <p>总投资:{{ props["ztz"] }}亿元</p>
- <p>2022完成投资:{{ props["ywctz"] }}亿元</p>
- <p>2023计划投资:{{ props["jhtz"] }}亿元</p>
- </div>
- <div class="content" v-if="detailType == 12">
- <h2>{{ props["name"] }}</h2>
- <p>行政区:{{ props["sqs"] }}</p>
- <p>建成面积:{{ (props["jcmj"] * 1500).toFixed(0) }}亩</p>
- <p>产业类型:{{ props["cylx"] }}</p>
- <p>
- 非生产性用地面积:{{ (props["fscxydmj"] * 1500).toFixed(0) }}亩
- </p>
- </div>
- <div class="content" v-if="detailType == 13">
- <h2>{{ props["tdqlr"] }}</h2>
- <p>地块名称:{{ props["dkmc"] }}</p>
- <p>土地坐落:{{ props["tdzl"] }}</p>
- </div>
- <div class="content" v-if="detailType == 14">
- <h2>{{ props["xmmc"] }}</h2>
- <p>批准文号:{{ props["pzwh"] }}</p>
- <p>实际利用:{{ props["sjly"] }}</p>
- </div>
- <div class="content" v-if="detailType == 15">
- <h2>{{ props["dlmc"] }}</h2>
- <p>坐落单位名称:{{ props["zldwmc"] }}</p>
- <p>面积:{{ (props["tbmj"] * 0.0015).toFixed(2) }}亩</p>
- </div>
- <div class="content" v-if="detailType == 20">
- <h2>{{ detailData["dkbh"] || props['dkbh'] }}</h2>
- <p>行政区划:{{ (detailData["ssqx"] || props["ssqx"]) }} - {{ detailData["ssjd"] || props["ssjd"] }}</p>
- <p>面积:{{ ((detailData["mj"] || props['mj'] * 15)).toFixed(2) }} 亩</p>
- </div>
- <div class="content" v-if="detailType == 21">
- <h2>{{ props["tdqlr"] }}</h2>
- <p>
- 行政区划:{{ props["szx"] }}
- {{
- props["szxz"] && props["szxz"] !== " "
- ? "-" + props["szxz"]
- : ""
- }}
- </p>
- <p>用地面积:{{ (props["sjydmj"] * 0.0015).toFixed(2) }} 亩</p>
- </div>
- <div class="content" v-if="detailType == 22">
- <h2>{{ props["xmmc"] }}</h2>
- <p>批次名称:{{ props["bpxmmc"] }}</p>
- <p>批准文号:{{ props["pzwh"] }}</p>
- </div>
- <div class="content" v-if="detailType == 23">
- <h2>
- {{ props["dkmc"] }}
- {{ props["dkbh"] && props["dkbh"] !== " " ? props["dkbh"] : "" }}
- </h2>
- <p>项目名称:{{ props["tzxmmc"] }}</p>
- <p>
- 面积:{{ props["txmj"] && (props["txmj"] * 0.0015).toFixed(2) }}
- 亩
- </p>
- </div>
- <div class="content" v-if="detailType == 24">
- <h2>{{ detailData["dkbh"] }}</h2>
- <p>行政区划:{{ "滨江区 - " + detailData["dkwz"] }}</p>
- <p>管地单位:{{ detailData["gddw"] }}</p>
- </div>
- <div class="content" v-if="detailType == 25">
- <h2>{{ props["name"] }}</h2>
- <p>
- 面积:{{ (props["sde.sde.特色小镇.area"] * 100 * 15).toFixed(1) }}
- 亩
- </p>
- </div>
- <div class="content" v-if="detailType == 26">
- <h2>{{ props["项目名称"] }}</h2>
- <p>面积:{{ (props["总用地面积"] * 0.0015).toFixed(2) }} 亩</p>
- </div>
- <div class="content" v-if="detailType == 27">
- <h2>{{ props["dkmc"] }}</h2>
- <p>面积:{{ (props["txmj"] * 0.0015).toFixed(2) }} 亩</p>
- </div>
- <div class="content" v-if="detailType == 31 || detailType == 33">
- <h2>
- {{
- props["tdqlr"] ||
- props["BSM"] ||
- props["项目名称"] ||
- props["dkbh"]
- }}
- </h2>
- <p v-show="props['sjydmj']">
- 面积:{{ (props["sjydmj"] * 0.0015).toFixed(2) }}亩
- </p>
- <p v-show="props['mj']">
- 面积:{{ (props["mj"] * 15).toFixed(2) }}亩
- </p>
- <p v-show="props['txmj']">
- 面积:{{ (props["txmj"] * 0.0015).toFixed(2) }}亩
- </p>
- <p v-show="props['总用地面积']">
- 面积:{{ (props["总用地面积"] * 0.0015).toFixed(2) }}亩
- </p>
- <!-- <p>批准文号:{{ props['pzwh'] }} </p>-->
- </div>
- <div class="content" v-if="detailType == 32">
- <h2>{{ props["dkbh"] }}</h2>
- <p v-show="props['mj']">
- 面积:{{ (props["mj"] * 15).toFixed(2) }}亩
- </p>
- <!-- <p>批准文号:{{ props['pzwh'] }} </p>-->
- </div>
- <div class="content" v-if="detailType === 50">
- <h2>{{ props["dlmc"] || props["dkbh"] }}</h2>
- <p>
- 面积:{{
- props["tbmj"]
- ? props["tbmj"].toFixed(2)
- : (props["mj"] * 15).toFixed(2)
- }}
- 亩
- </p>
- </div>
- <div class="content" v-if="detailType == 99">
- <h2>
- {{
- props["dkmc"] ||
- props["tdqlr"] ||
- props["BSM"] ||
- props["项目名称"] ||
- props["dkbh"] ||
- props["xmmc"]
- }}
- </h2>
- <p v-show="props['sjydmj']">
- 面积:{{ (props["sjydmj"] * 0.0015).toFixed(2) }}亩
- </p>
- <p v-show="props['mj']">
- 面积:{{ (props["mj"] * 15).toFixed(2) }}亩
- </p>
- <p v-show="props['txmj']">
- 面积:{{ (props["txmj"] * 0.0015).toFixed(2) }}亩
- </p>
- <p v-show="props['总用地面积']">
- 面积:{{ (props["总用地面积"] * 0.0015).toFixed(2) }}亩
- </p>
- <p v-show="props['spmj']">
- 面积:{{ (props["spmj"] * 0.0015).toFixed(2) }}亩
- </p>
- </div>
- <div class="content" v-if="detailType == 101">
- <p v-show="props['dymc']">单元名称:{{ props["dymc"] }}</p>
- <p v-show="props['yddm']">用地代码:{{ props["yddm"] }}</p>
- <p v-show="props['ydxz']">用地性质:{{ props["ydxz"] }}</p>
- </div>
- <div class="fixedIcon"></div>
- </div>
- </template>
- </vl-feature-overlay>
- <div class="modalBox" v-if="skybShow">
- <span class="close" @click="skybShow = false"></span>
- <div class="modalContent">
- <iframe
- id="imageTool"
- src="https://kjzl.zrzyt.zj.gov.cn/kjzlv2/blockTool"
- ></iframe>
- </div>
- </div>
- </vl-map>
- </template>
- <script>
- import { mapGetters, mapState } from "vuex";
- import MapUtils from "@/utils/MapUtils";
- import olMapUtils from "@/utils/OlMapUtils";
- import "ol/ol.css";
- import DragPan from "ol/interaction/DragPan";
- import VlMap from "@/components/ol/VlMap";
- import { getMapLayerConfig } from "@/components/ol/_utils/map-layer-utils";
- import { VlConfigLayers, VlLayerTree } from "@/components/ol/VlConfigLayers";
- import { VlToolBar, VlToolBarItem } from "@/components/ol/VlToolBar";
- import {
- VlFeatureFlicker,
- VlFeatureOverlay,
- } from "@/components/ol/VlFeatureTool";
- import VlLegend from "@/components/ol/VlLegend";
- import VlImglayers from "@/components/ol/VLImgLayers";
- import { arcgisQuery } from "@/utils/arcgis-map-server-query";
- import { GeoServerQuery } from '@/utils/geo-map-server-query'
- import VlMapDevInfo from "@/components/ol/VlMapDevInfo";
- import VlChinaCities from "@/components/ol/VlChinaCities";
- import { MultiPolygon } from "ol/geom";
- import { getSrid, mapFit, toArcGIS } from "@/utils/arcgis-utils";
- import { Stroke, Style } from "ol/style";
- import { Vector as VectorSource } from "ol/source";
- import { Vector as VectorLayer } from "ol/layer";
- import EChartsLayer from "ol-echarts";
- import { XZQ } from "@/utils/constant/Constant.js";
- import { scatter_bg4, bg_text } from "./base64Img.js";
- import { Geometry as WkxGeometry } from "wkx";
- import { GeoJSON } from "ol/format";
- import { convertRingsToGeoJSON } from "@/utils/ArcGISGeoJSONConvertTool.js";
- import { Fill, Text } from "ol/style";
- import VlToolBox from "@/components/ol/VlToolBox";
- import TABLE_COMP_MAPPING from "./TABLE_COMP_MAPPING.js";
- import { getArea } from "ol/sphere";
- import TdytMapping from "@/mock/TdytMapping.js";
- import HeatmapLayer from "ol/layer/Heatmap";
- import hotJson from "@/assets/geoJson/GYYDPT4490.json";
- export default {
- name: "BigScreenMap",
- computed: {
- ...mapState({
- xzqNameState: (state) => state.BaseData.xzqState,
- mapDataOne: (state) => state.BaseData.TDG,
- }),
- ...mapGetters({
- xzqdm: "BaseData/xzqCodeGetter",
- }),
- },
- components: {
- VlFeatureOverlay,
- VlChinaCities,
- VlMapDevInfo,
- VlLegend,
- VlLayerTree,
- VlFeatureFlicker,
- VlToolBarItem,
- VlToolBar,
- VlConfigLayers,
- VlMap,
- VlToolBox,
- VlImglayers,
- },
- filters: {},
- props: {
- districtCode: {
- type: String,
- default: "33",
- },
- imgLayers: Array,
- title: {
- type: String,
- default: "",
- },
- visibleLayerIds: {
- type: Array,
- default: () => [],
- },
- overlayShow: {
- type: Boolean,
- default: false,
- },
- layerShow: {
- type: Boolean,
- default: false,
- },
- defaultLayerId: {
- type: String,
- default: "",
- },
- fixed: {
- type: Number,
- default: 0,
- },
- GZData: {
- type: Array,
- default() {
- return [];
- },
- },
- legendShow: {
- type: Boolean,
- default: true,
- },
- defaultExpand: {
- type: Boolean,
- default: true,
- },
- townShow: {
- type: Boolean,
- default: true,
- },
- },
- data() {
- return {
- map: undefined,
- mapDragPan: null,
- visibleLayerId: "",
- detailData: {},
- detailType: 1,
- layerFeatureKey: undefined,
- viewInfo: {
- x: 120,
- y: 30,
- center: [0, 0],
- zoom: 0,
- extent: [0, 0, 0, 0],
- scale: 1,
- },
- layersConfig: getMapLayerConfig(), // getMapLayerConfig 获取的是 config.js 配置的克隆
- enabledLayersConfig: [], // 启用的图层配置,来源于 vl-config-layers 的loaded事件回调
- feature: undefined, // 闪烁和气泡的 特征
- districtFeature: undefined, // 行政区的特征
- showDetail: false,
- echartslayer: null,
- showLifeCircle: false,
- xzqType: "city",
- xzqName: "",
- realLayers: [],
- lifeCycleShow: false,
- vectorGeo: null,
- vmEventType: "",
- tdytMapping: {
- 1: "工业用地",
- 2: "商服用地",
- 3: "住宅用地",
- 4: "其他用地",
- },
- isIconBool: false,
- isShowIcon: false,
- echartsLayerClickHandle: null,
- layerIndex: "0", //图层级别默认为0
- heatMapLayer: null,
- tzzxShow: false,
- geoSource: new VectorSource(),
- geoLayer: undefined,
- isgyyd: "",
- kgLayer: null,
- skybShow: false,
- geometry: ''
- };
- },
- watch: {
- GZData: {
- immediate: true,
- deep: true,
- handler: function() {
- // 迁徙图图层初始化
- this.echartsLayerLoad();
- },
- },
- visibleLayerIds: {
- immediate: true,
- deep: true,
- handler () {
- this.visibleLayerId = this.visibleLayerIds[0];
- },
- },
- },
- mounted() {
- //监听 工具发来的信息
- window.addEventListener("message", this.setBlockMessage);
- this.$vm.$on("setLayerIndexEvent", (index) => {
- this.layerIndex = index;
- });
- let _initZoom = 8;
- const _clientW = document.documentElement.clientWidth;
- if (parseInt(_clientW) > 2000) {
- setTimeout(() => {
- _initZoom = 8.5;
- this.map.getView().setZoom(_initZoom);
- }, 200);
- }
- this.$vm.$on('updateLayer', (payload) => {
- const { id, param, layerIdx } = payload;
- let params = {};
- params = {
- layers: layerIdx,
- cql_filter: param,
- };
- let layer = this.getLayerById(id);
- layer.setVisible(true);
- const source = layer.getSource();
- source.updateParams(params);
- });
- this.$vm.$on("refreshLayer", (id) => {
- this.feature = null;
- if (id) {
- let layer = this.getLayerById(id);
- layer.setVisible(true);
- const source = layer.getSource();
- source.refresh();
- }
- });
- this.$vm.$on("setTzzxShow", (payload) => {
- this.tzzxShow = payload;
- });
- this.$vm.$on("setEchartsLayerClickHandle", (handle) => {
- this.echartsLayerClickHandle = handle;
- });
- this.$vm.$on("getGdDetailData", (payload) => {
- this.detailData = payload;
- });
- this.$vm.$on("setGdDetailType", (payload) => {
- this.detailType = payload;
- });
- this.$vm.$on("location-init", () => {
- this.feature = null;
- this.$vm.$emit("switchLayerShow", true);
- if (this.xzqNameState != "" && this.xzqNameState != "浙江省") {
- this.locationMaskFeatureHttp(this.xzqNameState, this.visibleLayerId);
- } else {
- setTimeout(() => {
- if (this.map) {
- if (window.vtLayer) {
- this.map.removeLayer(window.vtLayer);
- }
- this.map
- .getView()
- .setCenter([120.45690944408925, 29.248390754380974]);
- this.map.getView().setZoom(7.85);
- }
- }, 0);
- }
- });
- //改变图层显示
- this.$vm.$on("change-layer", () => {
- this.feature = null;
- this.removeHotLayer();
- this.$vm.$emit("switchLayerShow", true);
- });
- this.$vm.$on("clear-layer", () => {
- if (this.vectorGeo != null) {
- this.vectorGeo.getSource().clear();
- this.vectorGeo = null;
- }
- });
- this.$vm.$on("setLayerIdEvent", (name) => {
- if (!name) {
- this.visibleLayerId = this.visibleLayerIds[
- this.visibleLayerIds.length - 1
- ];
- } else {
- this.visibleLayerId = name;
- }
- });
- this.$vm.$on("location-feature", (payload) => {
- //根据dzjgh进行图斑定位
- const { dzjgh } = payload;
- this.locationFeatureHttp(dzjgh, this.visibleLayerId);
- });
- this.$vm.$on("location-feature-where", (payload) => {
- //根据dzjgh进行图斑定位
- const { layerId, where, setting = {} } = payload;
- this.locationFeatureWhere(layerId, where, setting);
- });
- this.$vm.$on("location-more-feature-where", (payload) => {
- //根据dzjgh进行图斑定位
- const { layerId, where, setting = {} } = payload;
- this.locationMoreFeatureWhere(layerId, where, setting);
- });
- this.$vm.$on("location-mask-feature", (payload) => {
- //根据dzjgh进行图斑定位
- const { dzjgh } = payload;
- this.locationMaskFeatureHttp(dzjgh, this.visibleLayerId);
- });
- this.$vm.$on("location-mask-self-where", (payload) => {
- //根据dzjgh进行图斑定位
- const { layerId, where } = payload;
- this.locationMaskFeatureWhere(layerId, where);
- });
- this.$vm.$on("showIconEvent", (name, type) => {
- if (!this.isIconBool) return;
- let id = "";
- switch (name) {
- case "已批未征":
- id = "pewg-ypwz";
- break;
- case "规划调整":
- id = "pewg-ghtz";
- break;
- case "项目未落实":
- id = "pewg-xmwls";
- break;
- case "手续未完善":
- id = "pewg-sxwws";
- break;
- case "储备土地":
- id = "pewg-zbtd";
- break;
- case "供地前期工作":
- id = "pewg-gdqqgz";
- break;
- case "零星难利用":
- id = "pewg-lxnly";
- break;
- case "农转用无法调整":
- id = "pewg-nzywftz";
- break;
- case "其他原因":
- id = "pewg-qtyy";
- break;
- case "待认定":
- id = "pewg-drd";
- break;
- }
- this.$vm.$emit("setLandMapLayerContro", { type: type, id: id });
- });
- //根据图层ID显示响应图层
- this.$vm.$on("setLandMapLayerContro", (payload) => {
- const { parentId, type, id } = payload;
- const landMapLayers = this.enabledLayersConfig[1]["children"];
- if (parentId) {
- for (let i = 0; i < landMapLayers.length; i++) {
- if (landMapLayers[i]["id"] === parentId) {
- landMapLayers[i]["visible"] = true;
- break;
- }
- }
- }
- if (id) {
- for (let i = 0; i < landMapLayers.length; i++) {
- if (landMapLayers[i]["id"] === id) {
- setTimeout(() => {
- landMapLayers[i]["visible"] = type == "hide" ? false : true;
- }, 1000);
- break;
- }
- }
- }
- });
- this.$vm.$on("switchLayerShow", (boolean) => {
- if (boolean) {
- this.feature = null;
- this.visibleLayerId = this.visibleLayerIds[0];
- this.realLayers = JSON.parse(JSON.stringify(this.visibleLayerIds));
- } else {
- this.realLayers = [];
- }
- });
- this.$vm.$on("GlobalStatisticsLayer", (payload) => {
- let { layerId, setting } = payload;
- this.statisticsLayer(layerId, setting);
- });
- },
- beforeDestroy() {
- // 修复 页面大小改变时 echartslayer 未销毁
- this.echartslayer && this.echartslayer.remove();
- },
- methods: {
- //发送项目信息给遥感影像工具
- setBlockMessage: function (event) {
- //判断是否为工具加载完成消息
- if (!event.data || !event.data.loadSuccess) {
- return;
- }
- //向遥感影像工具发送信息
- let receiver = document.getElementById("imageTool").contentWindow;
- let postString = {
- areaId: this.getAreaId(),
- geometryFormat: "wkt",
-
- geometry: this.geometry,
-
- };
- receiver.postMessage(postString, "*");
- },
- getAreaId () {
- const date = new Date();
- const random = Math.random().toString().substring(2)
- return random+date.getDate().toString();
- },
- initHotLayer(field) {
- this.heatMapLayer = new HeatmapLayer({
- source: new VectorSource({
- features: new GeoJSON().readFeatures(hotJson),
- // 我们使用json数据
- // url: require('@/assets/geojson/dxccHotlayer.json'),
- // format: new GeoJSON()
- }),
- // 这里可以根据自己项目的实际,绑定页面的控件动态调整
- blur: 8,
- radius: 6,
- weight: weightFunction,
- });
- /*
- *设置权重
- */
- function weightFunction(feature) {
- var weight = feature.get(field);
- weight = parseFloat(weight);
- // weight = parseFloat(weight) / 10;
- return weight;
- }
- // this.heatMapLayer.getSource().on('addfeature', function(event) {
- //
- // //var place = event.feature.get('place');
- // var magnitude = event.feature.get('mjss');
- // //设定权重减去的数字是为了过滤地震等级,比如只想显示3级以上地震,那就减去3
- // event.feature.set('weight', magnitude);
- // });
- this.heatMapLayer.setZIndex(999);
- this.map.addLayer(this.heatMapLayer);
- },
- vlImgLayerChangeHandle(val) {
- this.visibleLayerId = "bj-kgdk";
- const layer = this.$refs.configLayer.getLayerConfigById(
- this.visibleLayerId
- );
- layer.enabled = true;
- layer.visible = val;
- if (!val) {
- this.visibleLayerId = this.visibleLayerIds[0];
- }
- },
- vlImgLayerChangeHandle1(val) {
- this.visibleLayerId = "bjq-gd";
- const layer = this.$refs.configLayer.getLayerConfigById(
- this.visibleLayerId
- );
- layer.enabled = true;
- layer.visible = val;
- if (!val) {
- this.visibleLayerId = this.visibleLayerIds[0];
- }
- },
- vlImgLayerSliderChangeHandle(val) {
- this.visibleLayerId = "bj-kgdk";
- const layer = this.$refs.configLayer.getLayerConfigById(
- this.visibleLayerId
- );
- layer.opacity = val / 100;
- },
- vlImgLayerSliderChangeHandle1(val) {
- this.visibleLayerId = "bjq-gd";
- const layer = this.$refs.configLayer.getLayerConfigById(
- this.visibleLayerId
- );
- layer.opacity = val / 100;
- },
- removeHotLayer() {
- this.map.removeLayer(this.heatMapLayer);
- this.heatMapLayer = null;
- },
- clearGeoLayer() {
- if (this.geoLayer && this.geoSource) {
- this.geoSource.clear();
- this.map.removeLayer(this.geoLayer);
- }
- },
- addGeoLayer(geoJson) {
- if (this.geoLayer && this.geoSource) {
- this.geoSource.clear();
- this.map.removeLayer(this.geoLayer);
- }
- this.geoSource.addFeatures(new GeoJSON().readFeatures(geoJson));
- this.geoLayer = new VectorLayer({
- source: this.geoSource,
- style: function(feature) {
- return new Style({
- stroke: new Stroke({
- width: 1,
- color: "rgba(255, 255, 255, 1)",
- }),
- fill: new Fill({
- color: feature.get("color"),
- }),
- // text: new Text(({
- // // 位置
- // textAlign: 'center',
- // // 基准线
- // textBaseline: 'middle',
- // // 文字样式
- // font: 'bold 16px 微软雅黑',
- // // 文本内容
- // text: feature.get('name')+'\n'+feature.get('value')+' '+feature.get('unit'),
- // // 文字颜色
- // fill: new Fill({ color: '#FFF' }),
- // // fill: new Fill({ color: feature.get('color') }),
- // // 文字背景
- // // stroke: new Stroke({ color: '#ffcc33', width: 10 })
- // }))
- });
- },
- zIndex: 99,
- });
- this.map.addLayer(this.geoLayer);
- // this.map.getView().fit(this.geoLayer.getSource().getExtent(), { duration: 500 })
- // let selectClick = new interaction.Select();
- // this.map.addInteraction(selectClick);
- // selectClick.on('select', (e)=>{
- // var features=e.target.getFeatures().getArray();
- // this.$emit('mapSelect',features[0].getProperties())
- // })
- return this.geoLayer;
- // this.geoLayer.setMap(this.map)
- },
- addGeoLayer2(geoJson) {
- if (this.geoLayer && this.geoSource) {
- this.geoSource.clear();
- this.map.removeLayer(this.geoLayer);
- }
- this.geoSource.addFeatures(new GeoJSON().readFeatures(geoJson));
- this.geoLayer = new VectorLayer({
- source: this.geoSource,
- style: function() {
- return new Style({
- stroke: new Stroke({
- width: 1,
- color: "#4AD808",
- }),
- fill: new Fill({
- color: "#4AD808",
- }),
- // text: new Text(({
- // // 位置
- // textAlign: 'center',
- // // 基准线
- // textBaseline: 'middle',
- // // 文字样式
- // font: 'bold 16px 微软雅黑',
- // // 文本内容
- // text: feature.get('name')+'\n'+feature.get('value')+' '+feature.get('unit'),
- // // 文字颜色
- // fill: new Fill({ color: '#FFF' }),
- // // fill: new Fill({ color: feature.get('color') }),
- // // 文字背景
- // // stroke: new Stroke({ color: '#ffcc33', width: 10 })
- // }))
- });
- },
- zIndex: 99,
- });
- this.map.addLayer(this.geoLayer);
- // this.map.getView().fit(this.geoLayer.getSource().getExtent(), { duration: 500 })
- // let selectClick = new interaction.Select();
- // this.map.addInteraction(selectClick);
- // selectClick.on('select', (e)=>{
- // var features=e.target.getFeatures().getArray();
- // this.$emit('mapSelect',features[0].getProperties())
- // })
- return this.geoLayer;
- // this.geoLayer.setMap(this.map)
- },
- filterTdyt(val) {
- if (!val) return;
- if (!TdytMapping[val.trim()]) {
- return "";
- } else {
- return TdytMapping[val.trim()];
- }
- },
- showLandDetail(props) {
- this.$vm.$emit("yqModalShow", props);
- },
- showSpDetail(props) {
- this.$vm.$emit("showSpDetail", props);
- },
- async locationMoreFeatureWhere(layerId, where, setting = {}) {
- const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
- if (!layerById) {
- console.error(`no layer id`);
- return;
- }
- await arcgisQuery(
- `${layerById.url}/${this.layerIndex}/query`,
- {
- outSR: getSrid(this.map),
- where,
- ...setting,
- },
- false
- ).then(({ features }) => {
- let json = { type: "FeatureCollection", features: [] };
- features.forEach((it) => {
- json.features.push(convertRingsToGeoJSON(it.geometry.rings));
- });
- if (this.vectorGeo != null) {
- this.vectorGeo.getSource().clear();
- this.vectorGeo = null;
- }
- // 使用GeoJSON构建source
- const source = new VectorSource({
- features: new GeoJSON().readFeatures(json),
- });
- this.vectorGeo = new VectorLayer({
- source: source,
- style: new Style({
- fill: new Fill({
- // 填充
- color: "rgba(0,255,0, 0.6)",
- }),
- stroke: new Stroke({
- width: 5,
- color: "#00FF00",
- }),
- }),
- zIndex: 99,
- });
- this.map.addLayer(this.vectorGeo);
- this.map.getView().fit(source.getExtent(), {
- duration: 500,
- maxZoom: 17,
- });
- });
- },
- locationByGeoJson(geos) {
- this.feature = new GeoJSON().readFeatures(geos)[0];
- },
- locationByGeoJsonColor(geos, color, width) {
- let source = new VectorSource({
- features: new GeoJSON().readFeatures(geos),
- });
- let geoLayer = new VectorLayer({
- source: source,
- // 设置样式,边框和填充
- style: new Style({
- stroke: new Stroke({
- color: color,
- width: width,
- }),
- // fill: new Fill({
- // color: 'rgba(255, 255, 0, 0.5)'
- // })
- }),
- zIndex: 999,
- });
- // 添加GeoJSON到map上
- this.map.addLayer(geoLayer);
- this.map.getView().fit(source.getExtent(), {
- duration: 500,
- maxZoom: 17,
- });
- },
- async locationFeatureHttp(
- bsm,
- layerId,
- { feature = undefined, row = undefined } = {}
- ) {
- this.layerFeatureKey = TABLE_COMP_MAPPING[layerId].layerField;
- layerId = layerId || this.visibleLayerId;
- const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
- if (!layerById) {
- console.error(`no layer id`);
- return;
- }
- if (bsm) {
- this.spinShow = true;
- if (!feature) {
- const where = `${this.layerFeatureKey} = '${bsm}'`;
-
- if (layerById.serverType === 'wms') {
- await GeoServerQuery(`${layerById.queryUrl}`, {
- typeName: layerById.params.layers,
- cql_filter: where
- }, true).then(({ features }) => {
- feature = features[0]
- })
- } else {
- await arcgisQuery(
- `${layerById.url}/${this.layerIndex}/query`,
- {
- outSR: getSrid(this.map),
- where,
- },
- true
- ).then(({ features }) => {
- feature = features[0];
- });
- }
- }
- if (row) {
- feature.setProperties({ ...row });
- }
- this.spinShow = false;
- }
- if (feature) {
- const geometry = feature.getGeometry();
- const wkt = WkxGeometry.parseGeoJSON(
- new GeoJSON().writeGeometryObject(geometry)
- ).toWkt();
- feature.set("wkt", wkt);
- this.feature = feature;
- this.$vm.$emit("getGeoData", feature); //初始化土地生命周期geo/feature参数
- }
- },
- async locationFeatureWhere(layerId, where, setting) {
- this.spinShow = true;
- const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
- if (layerById.serverType === 'wms') {
- await GeoServerQuery(`${layerById.queryUrl}`, {
- typeName: layerById.params.layers,
- cql_filter: where
- }, true).then(({ features }) => {
- this.feature = features[0]
- })
- } else {
- await arcgisQuery(
- `${layerById.url}/${this.layerIndex}/query`,
- {
- outSR: getSrid(this.map),
- where,
- ...setting,
- },
- true
- ).then(({ features }) => {
- let feature = features[0];
- const geometry = feature.getGeometry();
- const wkt = WkxGeometry.parseGeoJSON(
- new GeoJSON().writeGeometryObject(geometry)
- ).toWkt();
- feature.set("wkt", wkt);
- this.feature = feature;
- });
- }
- this.spinShow = false;
- },
- async locationMaskFeatureHttp(
- bsm,
- layerId,
- { feature = undefined, row = undefined } = {}
- ) {
- this.layerFeatureKey = TABLE_COMP_MAPPING[layerId].layerField;
- layerId = layerId || this.visibleLayerId;
- const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
- if (!layerById) {
- console.error(`no layer id`);
- return;
- }
- if (bsm) {
- this.spinShow = true;
- if (!feature) {
- const where = `${this.layerFeatureKey} = '${bsm}'`;
- await arcgisQuery(
- `${layerById.url}/${this.layerIndex}/query`,
- {
- outSR: getSrid(this.map),
- where,
- },
- false
- ).then((resp) => {
- const { features } = resp;
- let json = { type: "FeatureCollection", features: [] };
- json.features.push(
- convertRingsToGeoJSON(features[0].geometry.rings)
- );
- MapUtils.drawShade(this.map, json);
- });
- }
- if (row) {
- feature.setProperties({ ...row });
- }
- this.spinShow = false;
- }
- this.feature = feature;
- if (feature) {
- this.$vm.$emit("getGeoData", feature); //初始化土地生命周期geo/feature参数
- }
- },
- async locationMaskFeatureWhere(layerId, where) {
- const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
- if (!layerById) {
- console.error(`no layer id`);
- return;
- }
- this.spinShow = true;
- if (layerById.serverType === 'wms') {
- await GeoServerQuery(`${layerById.queryUrl}`, {
- typeName: layerById.params.layers,
- cql_filter: where
- }, false).then((resp) => {
- const { features } = resp;
- let json = { type: "FeatureCollection", features: [] };
- json.features.push(
- features[0].geometry
- );
- MapUtils.drawShade(this.map, json);
- })
- } else {
- await arcgisQuery(
- `${layerById.url}/0/query`,
- {
- outSR: getSrid(this.map),
- where,
- },
- false
- ).then((resp) => {
- const { features } = resp;
- let json = { type: "FeatureCollection", features: [] };
- json.features.push(convertRingsToGeoJSON(features[0].geometry.rings));
- MapUtils.drawShade(this.map, json);
- });
- }
- this.spinShow = false;
- },
- mapLoaded(map) {
- window.map = map;
- this.map = map;
- const layerId = this.visibleLayerId;
- // 图斑拾取黑名单
- const pickBlackList = [];
- map.on("singleclick", (e) => {
- this.$vm.$emit("clear-layer");
- if (this.visibleLayerId === "xzqh-s-search") return;
- if (this.visibleLayerId === "xzqh-x-search") return;
- const drawing = map.get("drawing");
- if (drawing || pickBlackList.includes(layerId)) {
- console.log("no pick event");
- return;
- }
- this.detailData = {}
- this.pickServerFeature(e);
- });
- map.on("moveend", () => {
- let zoom = map.getView().getZoom(); //获取当前地图的缩放级别
- if (zoom >= 11.3) {
- // this.visibleLayerId = this.visibleLayerIds[
- // this.visibleLayerIds.length - 1
- // ];
- if (this.mapDragPan) {
- this.mapDragPan.setActive(true);
- }
- //缩放至一定级别不显示tooptip图例
- // this.echartslayer.hide();
- } else {
- this.visibleLayerId = this.visibleLayerIds[0];
- if (this.visibleLayerId === "xzqh-s-search" && this.mapDragPan) {
- this.mapDragPan.setActive(true);
- }
- // this.echartslayer.show();
- }
- if (zoom >= 9 && this.xzqType !== "town" && this.townShow) {
- // 县级市
- if (this.vmEventType) {
- this.$vm.$emit(this.vmEventType, "town");
- }
- this.xzqType = "town";
- this.$emit("moveend", this.xzqType);
- this.enabledLayersConfig[0]["children"][2]["children"][0][
- "visible"
- ] = false;
- this.enabledLayersConfig[0]["children"][2]["children"][4][
- "visible"
- ] = true;
- if (this.isIconBool && !this.isShowIcon) {
- this.isShowIcon = true;
- }
- } else if (zoom < 9 && this.xzqType !== "city") {
- // 地级市
- if (this.vmEventType) {
- this.$vm.$emit(this.vmEventType, "city");
- }
- this.xzqType = "city";
- this.$emit("moveend", this.xzqType);
- this.enabledLayersConfig[0]["children"][2]["children"][0][
- "visible"
- ] = true;
- this.enabledLayersConfig[0]["children"][2]["children"][4][
- "visible"
- ] = false;
- }
- });
- map.getView().setCenter([120.45690944408925, 29.248390754380974]);
- map.getView().setZoom(7.85);
- this.map.getInteractions().forEach((element) => {
- if (element instanceof DragPan) {
- this.mapDragPan = element;
- }
- });
- },
- echartsLayerLoad() {
- if (this.echartslayer !== null) {
- // this.map.removeLayer(this.echartslayer);
- this.echartslayer.remove();
- this.echartslayer = null;
- }
- // 迁徙图图层初始化
- this.echartslayer = new EChartsLayer(this.getOption());
- this.echartslayer.setMap(this.map);
- this.echartslayer.$chart.on("click", (item) => {
- if (!this.echartsLayerClickHandle) return;
- this.echartsLayerClickHandle(item);
- });
- },
- getOption() {
- var geoCoordMap = null;
- let GZData = [];
- let isShow = true;
- let typeStr = 1; //Scatter背景图类型 0、1
- if (this.GZData && this.GZData.length > 0) {
- isShow = true;
- GZData = this.GZData;
- typeStr = GZData[0]["typeIndex"];
- } else {
- isShow = false;
- }
- if (!this.xzqName) {
- if (this.xzqType === "town") {
- const keys = Object.keys(XZQ[this.xzqType]);
- geoCoordMap = {};
- for (let i = 0; i < keys.length; i++) {
- const mapItem = XZQ[this.xzqType][keys[i]];
- Object.assign(geoCoordMap, mapItem);
- }
- } else {
- geoCoordMap = XZQ[this.xzqType];
- }
- } else {
- geoCoordMap = XZQ[this.xzqType][this.xzqName];
- }
- var convertData2 = function(data) {
- var res = [];
- data.forEach((item) => {
- var geoCoord = geoCoordMap[item.name];
- if (geoCoord) {
- res.push({
- name: item.name,
- value: geoCoord,
- query: item["query"],
- param: item["param"],
- });
- }
- });
- return res;
- };
- const series = [
- {
- type: "scatter",
- coordinateSystem: "geo",
- tooltip: { show: false },
- z: 999,
- label: {
- normal: {
- show: true,
- formatter: function(item) {
- return `{tline|${item["name"]}}`;
- },
- rich: {
- tline: {
- color: "#FFF",
- align: "center",
- fontSize: 15,
- fontWeight: 600,
- },
- },
- },
- emphasis: {
- show: true,
- },
- },
- itemStyle: {
- opacity: 1,
- color: function(val) {
- return "#333";
- },
- },
- data: convertData2(GZData),
- },
- ];
- if (isShow) {
- if (typeStr === 0) {
- series[0]["symbolOffset"] = [0, -5];
- series.push(
- {
- type: "scatter",
- coordinateSystem: "geo",
- tooltip: { show: false },
- z: 999999999,
- label: {
- normal: {
- show: true,
- formatter: function(item) {
- const param = item["data"]["param"];
- const order = param["order"] || "0";
- return `{tline|${order}}`;
- },
- rich: {
- tline: {
- color: "#0B2E3A",
- align: "center",
- fontSize: 14,
- fontWeight: 600,
- },
- },
- },
- emphasis: {
- show: true,
- },
- },
- itemStyle: {
- opacity: 1,
- color: function(val) {
- let a;
- if (val.data.param.order < 4) {
- a = "#FAED25";
- } else {
- a = "#00FFEA";
- }
- return a;
- },
- },
- symbol: "circle",
- symbolSize: 26,
- symbolOffset: [-45, -80], //开发强度 [-40, -70]、要素保障 [-35, -80]
- data: convertData2(GZData),
- },
- {
- //图例
- type: "scatter",
- coordinateSystem: "geo",
- tooltip: { show: false },
- z: 99999,
- label: {
- normal: {
- show: true,
- formatter: function(item) {
- const param = item["data"]["param"];
- const value1 = param["value1"] || "";
- const value2 = param["value2"] || 0;
- const unit1 = param["unit1"] || "";
- const unit2 = param["unit2"] || "";
- return `{tline1|${value1}}{tline2|${unit1}}\n{fline1|${value2}}{fline2|${unit2}}`;
- },
- rich: {
- //开发强度 [0, 2]、要素保障 [2, 2]
- tline1: {
- padding: [5, 0],
- color: "#07FCFF",
- align: "center",
- fontSize: 15,
- fontWeight: 700,
- },
- tline2: {
- padding: [5, 0],
- color: "#07FCFF",
- align: "center",
- fontSize: 12,
- fontWeight: 600,
- },
- fline1: {
- color: "#FFFFFF",
- fontSize: 14,
- align: "center",
- fontWeight: 700,
- },
- fline2: {
- color: "#FFFFFF",
- fontSize: 14,
- align: "center",
- },
- },
- //开发强度 [0, 10]、要素保障 [2, 2]
- offset: [0, -5],
- },
- emphasis: {
- show: true,
- },
- },
- itemStyle: {
- borderWidth: 0,
- opacity: 1,
- color: "transparent",
- },
- symbol: function(val, item) {
- return scatter_bg4;
- },
- symbolSize: function(val, item) {
- return [90, 65];
- },
- symbolOffset: [0, -50],
- data: convertData2(GZData),
- }
- );
- } else {
- series[0]["symbolOffset"] = [0, 28];
- const getLineMaxHeight = (data) => {
- const maxValue = Math.max(
- ...data.map((item) => item["param"]["value1"])
- );
- return 0.6 / maxValue;
- };
- const maxHeight = getLineMaxHeight(GZData);
- const getLineData = (data) => {
- const dataArr = [];
- data.forEach((item) => {
- const name = item.name;
- if (geoCoordMap[name]) {
- dataArr.push({
- query: item["query"],
- coords: [
- geoCoordMap[name],
- [
- geoCoordMap[name][0],
- geoCoordMap[name][1] +
- item["param"]["value1"] * maxHeight,
- ],
- ],
- });
- }
- });
- return dataArr;
- };
- const lineData = getLineData(GZData);
- // 柱状体的顶部
- const getTopBarPosition = (data) => {
- const dataArr = [];
- data.forEach((item) => {
- const name = item.name;
- if (geoCoordMap[name]) {
- dataArr.push([
- geoCoordMap[name][0],
- geoCoordMap[name][1] + item["param"]["value1"] * maxHeight,
- ]);
- }
- });
- return dataArr;
- };
- const getTopBarPosAndData = (data) => {
- const dataArr = [];
- data.forEach((item) => {
- const name = item.name;
- if (geoCoordMap[name]) {
- dataArr.push([
- geoCoordMap[name][0],
- geoCoordMap[name][1] + item["param"]["value1"] * maxHeight,
- item,
- ]);
- }
- });
- return dataArr;
- };
- series.push(
- {
- type: "scatter",
- coordinateSystem: "geo",
- tooltip: { show: false },
- z: 9999999,
- label: {
- normal: {
- show: true,
- formatter: function(item) {
- const data = item["data"];
- const param = data[data.length - 1]["param"];
- if (!param) return;
- const value1 = param["value1"] || "";
- const unit1 = param["unit1"] || "";
- return `{tline1|${value1}}{tline2|${unit1}}`;
- },
- rich: {
- tline1: {
- color: "#07FCFF",
- align: "center",
- fontSize: 15,
- fontWeight: 700,
- },
- tline2: {
- color: "#07FCFF",
- align: "center",
- fontSize: 12,
- fontWeight: 600,
- },
- },
- offset: [0, 0],
- },
- emphasis: {
- show: true,
- },
- },
- itemStyle: {
- borderWidth: 0,
- opacity: 1,
- color: "transparent",
- },
- symbol: bg_text,
- symbolSize: function(val, item) {
- return [70, 30];
- },
- symbolOffset: [0, -24],
- data: getTopBarPosAndData(GZData),
- },
- {
- type: "scatter",
- coordinateSystem: "geo",
- geoIndex: 0,
- zlevel: 999999,
- label: {
- show: false,
- },
- symbol: "circle",
- symbolSize: [20, 10],
- itemStyle: {
- color: "#ECC200",
- opacity: 1,
- },
- silent: true,
- data: getTopBarPosition(GZData),
- },
- // 柱状体的主干
- {
- type: "lines",
- zlevel: 999,
- effect: {
- show: false,
- symbolSize: 5, // 图标大小
- },
- lineStyle: {
- width: 20, // 尾迹线条宽度
- color: "#FFDE00",
- opacity: 1, // 尾迹线条透明度
- curveness: 0, // 尾迹线条曲直度
- },
- label: {
- show: 0,
- position: "end",
- formatter: "245",
- },
- data: lineData,
- },
- // 柱状体的底部
- {
- type: "scatter",
- coordinateSystem: "geo",
- geoIndex: 0,
- zlevel: 9,
- label: {
- show: false,
- },
- symbol: "circle",
- symbolSize: [20, 10],
- itemStyle: {
- color: "#FFDE44",
- opacity: 1,
- },
- silent: true,
- data: convertData2(GZData),
- },
- {
- type: "scatter",
- coordinateSystem: "geo",
- geoIndex: 0,
- zlevel: 4,
- label: {
- show: false,
- },
- symbol: "circle",
- symbolSize: [40, 20],
- itemStyle: {
- color: "#fff",
- opacity: 1,
- },
- silent: true,
- data: convertData2(GZData),
- },
- {
- type: "scatter",
- coordinateSystem: "geo",
- geoIndex: 0,
- zlevel: 4,
- label: {
- show: false,
- },
- symbol: "circle",
- symbolSize: [60, 32],
- itemStyle: {
- color: {
- type: "radial",
- x: 0.5,
- y: 0.5,
- r: 0.5,
- colorStops: [
- {
- offset: 0,
- color: "transparent", // 0% 处的颜色
- },
- {
- offset: 0.85,
- color: "transparent", // 100% 处的颜色
- },
- {
- offset: 0.98,
- color: "#FFDE44", // 100% 处的颜色
- },
- {
- offset: 1,
- color: "#FFDE44", // 100% 处的颜色
- },
- ],
- global: false, // 缺省为 false
- },
- opacity: 1,
- },
- silent: true,
- data: convertData2(GZData),
- }
- );
- }
- } else {
- series.push({
- type: "scatter",
- coordinateSystem: "geo",
- itemStyle: {
- color: "transparent",
- },
- z: 999,
- label: {
- show: true,
- normal: {
- show: true,
- formatter: function(params) {
- const name = params.name;
- return name;
- },
- fantFamily: "Microsoft YaHei",
- color: "#FFFFFF",
- fontSize: 19,
- textShadowColor: "#000000",
- textShadowBlur: 2,
- textShadowOffsetX: 2,
- textShadowOffsetY: 2,
- },
- },
- data: convertData2(GZData),
- });
- }
- return {
- tooltip: {
- trigger: "item",
- },
- series: series,
- };
- },
- configLayerLoaded(enabledLayersConfig) {
- this.enabledLayersConfig = enabledLayersConfig;
- },
- async pickServerFeature(e) {
- console.log(
- this.visibleLayerId,
- typeof this.visibleLayerId,
- "typeof this.visibleLayerId"
- );
- let tempLayerIds = this.visibleLayerIds.filter(
- (it) =>
- it !== "xzqh-s" &&
- it !== "xzqh-s-search" &&
- it !== "xzqh-x-search" &&
- it !== "xzqh-x-search-dzl" &&
- it !== "xzqh-x" &&
- it !== "xzqh-z" &&
- it !== "bjq-xzq" &&
- it !== "hzyx-202311" &&
- it !== "hzyx-202310" &&
- it !== "hzyx-202308" &&
- it !== "hzyx-202309" &&
- it !== "bj-czkfbj" &&
- it !== "bj-stbhhx" &&
- it !== "bj-kfbjw"
- );
- if (tempLayerIds.length === 1) {
- const layerConfig = this.$refs.configLayer.getLayerConfigById(
- this.visibleLayerId
- );
- // 带上图层显示参数,只拾取显示的图斑
- let where = "1=1";
- try {
- where = layerConfig.params.layerDefs[0];
- if (!where) {
- where = "1=1";
- }
- } catch (e) {
- // 获取图层 参数
- }
- const [x, y] = e.coordinate;
- const param = {
- where,
- f: "json",
- inSR: getSrid(this.map),
- outFields: TABLE_COMP_MAPPING[this.visibleLayerId]
- ? TABLE_COMP_MAPPING[this.visibleLayerId]["outFields"]
- : "",
- returnGeometry: "true",
- geometry: JSON.stringify({ x, y }),
- geometryType: "esriGeometryPoint",
- };
- const pointWkt = `POINT(${y} ${x})`
- if (layerConfig.serverType === 'wms') {
- return GeoServerQuery(`${layerConfig.queryUrl}`, {
- typeName: layerConfig.params.layers,
- cql_filter: `INTERSECTS(shape, ${pointWkt})`
- }, true).then(({ features: [feature] }) => {
- if (feature) {
- this.locationFeature(null, this.visibleLayerId, { feature });
- } else {
- this.feature = undefined;
- }
- })
- }
- arcgisQuery(
- `${layerConfig.url}/${this.layerIndex}/query`,
- param,
- true
- ).then(({ features: [feature] }) => {
- if (feature) {
- this.locationFeature(null, this.visibleLayerId, { feature });
- } else {
- this.feature = undefined;
- }
- });
- } else if (tempLayerIds.length > 1) {
- // 带上图层显示参数,只拾取显示的图斑
- const where = "1=1";
- const [x, y] = e.coordinate;
- const param = {
- where,
- f: "json",
- inSR: getSrid(this.map),
- outFields: "",
- returnGeometry: "true",
- geometry: JSON.stringify({ x, y }),
- geometryType: "esriGeometryPoint",
- };
- const pointWkt = `POINT(${y} ${x})`
- const urls = tempLayerIds.map((i) => this.getLayerConfigById(i));
- console.log("1109行----------------------------------")
- const promiseArr = urls.map(i => {
- if (i.serverType === 'wms') {
- return GeoServerQuery(`${i.queryUrl}`, {
- typeName: i.params.layers,
- cql_filter: `INTERSECTS(shape, ${pointWkt})`
- }, true)
- }
- return arcgisQuery(`${i}/0/query`, param, true)
- })
- const feature = await Promise.all(promiseArr).then((resp) => {
- if (this.visibleLayerIds.includes("bj-gyyd-new")) {
- for (let i = 0; i < resp.length; i++) {
- if (resp[i].features.length != 0) {
- this.isgyyd = resp[i].displayFieldName;
- }
- }
- }
- for (let i = 0; i < resp.length; i++) {
- if (resp[i].features.length) {
- this.visibleLayerId = tempLayerIds[i];
- break;
- }
- }
- const features = resp
- .filter((i) => i.features.length)
- .map((i) => i.features[0]);
- return features[0];
- });
- if (feature) {
- this.locationFeature(null, this.visibleLayerId, { feature });
- } else {
- this.feature = undefined;
- }
- }
- },
- async locationFeature(
- bsm,
- layerId,
- { feature = undefined, row = undefined } = {}
- ) {
- if (feature) {
- const geometry = feature.getGeometry();
- const wkt = WkxGeometry.parseGeoJSON(
- new GeoJSON().writeGeometryObject(geometry)
- ).toWkt();
- feature.set("wkt", wkt);
- this.feature = feature;
- this.$vm.$emit("getGeoData", feature); //初始化土地生命周期geo/feature参数
- this.$vm.$emit(
- "mapClickHandle",
- feature.getProperties(),
- this.visibleLayerId
- );
- this.$emit("mapClick", feature.getProperties(), this.visibleLayerId);
- }
- this.drawendFeaturePop(this.feature);
- },
- locationMoreFeatureWithShade(where, layerId, setting = {}) {
- this.spinShow = true;
- const layer = this.$refs.configLayer.getLayerConfigById(layerId);
- if (!layer) {
- console.error(`no layer id`);
- return;
- }
- arcgisQuery(
- `${layer.url}/${this.layerIndex}/query`,
- {
- outSR: getSrid(this.map),
- where,
- ...setting,
- },
- false
- ).then(({ features }) => {
- this.spinShow = false;
- const geos = {
- type: "FeatureCollection",
- features: [
- {
- type: "Feature",
- geometry: {
- type: "MultiPolygon",
- coordinates: [],
- },
- properties: {},
- },
- ],
- };
- let temp = [];
- features.forEach((it) => {
- temp = [...temp, ...it["geometry"]["rings"]];
- });
- geos["features"][0]["geometry"]["coordinates"] = [[...temp]];
- this.addGeoLayer2(geos);
- // MapUtils.drawShade(this.map, JSON.stringify(geos))
- });
- },
- drawendFeaturePop(drawFeature) {
- if (!drawFeature) {
- this.drawFeature = drawFeature;
- return;
- }
- const geometry = drawFeature.getGeometry();
- const area = getArea(geometry, {
- projection: this.map.getView().getProjection(),
- });
- drawFeature.set("area", (area / 666.67).toFixed(2));
- this.drawendDistrict(drawFeature);
- },
- drawendDistrict(drawFeature) {
- // const urls = ['xzqh-s', 'xzqh-x', 'xzqh-z'].map(i => this.getLayerConfigById(i).url)
- const urls = ["xzqh-z"].map((i) => this.getLayerConfigById(i).url);
- const srid = getSrid(this.map);
- const param = {
- geometry: toArcGIS(drawFeature.getGeometry(), true),
- geometryType: "esriGeometryPolygon",
- spatialRel: "esriSpatialRelIntersects",
- inSR: srid,
- outSR: srid,
- returnGeometry: false,
- where: `1=1`,
- };
- const promiseArr = urls.map((i) =>
- arcgisQuery(`${i}/${this.layerIndex}/query`, param, false)
- );
- Promise.all(promiseArr).then((resp) => {
- const features = resp
- .filter((i) => i.features.length)
- .map((i) => i.features);
- drawFeature.set(
- "areaList",
- features.flat().map((i) => i.attributes.FULLNAME.substr(3))
- );
- console.log(drawFeature, features, "Promise all resp");
- this.drawFeature = drawFeature;
- });
- },
- resetMapView() {
- const { districtFeature, map } = this;
- if (districtFeature) {
- mapFit(districtFeature, map);
- } else {
- this.$refs.configLayer.resetMapView();
- }
- },
- drawend(features) {
- // 绘制结束或清空绘制
- const multiPolygon = features
- ? new MultiPolygon(features.map((i) => i.getGeometry()))
- : features;
- const payload = {
- geometry: multiPolygon ? toArcGIS(multiPolygon, true) : "",
- srid: getSrid(this.map),
- };
- this.$store.dispatch("spacemap/setSketchRangeAnalysis", payload);
- },
- getLayerConfigById(layerId) {
- return this.$refs.configLayer.getLayerConfigById(layerId);
- },
- dateFormat(date) {
- if (date === null || date === undefined || date === "") {
- console.log("时间格式化有误,时间为null");
- return "";
- }
- if (typeof date === "string") {
- return date.substr(0, 10);
- }
- var time = new Date(date);
- var y = time.getFullYear();
- var m = time.getMonth() + 1;
- var d = time.getDate();
- return y + "-" + this.add0(m) + "-" + this.add0(d);
- },
- add0(m) {
- return m < 10 ? "0" + m : m;
- },
- getLayerById(id) {
- return this.$refs.configLayer.getLayerById(id);
- },
- mockDetail(props) {
- this.$vm.$emit("getMockDetail", props);
- },
- bjmockDetail(props) {
- this.$vm.$emit("getBjMockDetail", props);
- },
- locationTsxzDetail(props) {
- this.$vm.$emit("locationTsxzDetail", props);
- },
- tzzxDetail(props) {
- this.$vm.$emit("getTzzxDetail", props);
- },
- statisticsLayer (layerId, setting) {
- const layerById = this.$refs.configLayer.getLayerConfigById(layerId);
- arcgisQuery(
- `${layerById.url}/${this.layerIndex}/query`,
- setting,
- false
- ).then(({ features }) => {
- this.$vm.$emit(
- "statisticsLayerCallback",
- features,
- setting["groupByFieldsForStatistics"]
- );
- });
- },
- skyb(props) {
- this.skybShow = true;
- this.geometry = props.wkt;
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .vl-tool-bar {
- display: flex;
- top: 5px !important;
- right: 10px !important;
- > li {
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- width: 34px !important;
- height: 34px !important;
- border: 1px solid #468ec0;
- background: linear-gradient(0deg, #102a54 0%, #3d5a93 100%);
- border-radius: 4px;
- .img {
- width: 18px !important;
- height: 18px !important;
- }
- > div {
- display: flex;
- align-items: center;
- justify-content: center;
- }
- }
- }
- .overlayBox {
- background: url("../../../assets/images/dk_detail_bg.png") no-repeat;
- background-size: 100% 100%;
- padding: 12px 15px;
- border-radius: 2px;
- position: relative;
- font-family: Alibaba PuHuiTi;
- margin-bottom: 40px;
- min-width: 340px;
- > .fixedIcon {
- position: absolute;
- width: 50px;
- height: 50px;
- bottom: -50px;
- left: 0px;
- right: 0px;
- margin: auto;
- background: url("../../../assets/images/map_icon.png") no-repeat;
- background-size: 100% 100%;
- }
- > .title {
- color: #fff;
- position: relative;
- top: -5px;
- font-size: 16px;
- font-weight: bold;
- > .btn {
- float: right;
- cursor: pointer;
- background-color: #0178cd;
- padding: 5px 10px;
- display: inline-block;
- border-radius: 2px;
- margin-top: -5px;
- color: #fff;
- &:hover {
- color: #22f3e2;
- }
- }
- .label {
- float: right;
- color: #22f3e2;
- margin-top: 8px;
- }
- }
- > .content {
- padding: 15px 5px;
- max-width: 360px;
- > h2,
- p {
- color: #fff;
- }
- > h2 {
- font-size: 16px !important;
- margin-bottom: 10px;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- font-weight: bold;
- }
- > p {
- font-size: 15px;
- margin: 5px 0px;
- }
- }
- }
- .overview-map {
- position: relative;
- width: 100%;
- height: 100%;
- overflow: hidden;
- $mask-bgc: radial-gradient(
- closest-side at 50%,
- rgba(4, 18, 41, 0) 0,
- rgba(0, 15, 51, 0.2)
- );
- .space-map-mask {
- position: absolute;
- top: 0;
- left: 0;
- z-index: 0;
- width: 100%;
- height: 100%;
- background-image: $mask-bgc;
- pointer-events: none;
- }
- .map-view-info {
- position: absolute;
- bottom: 10px;
- left: 15px;
- width: 350px;
- height: 32px;
- background: rgba(56, 150, 236, 0.64);
- box-shadow: 0 0 20px 1px #012357;
- font-size: 14px;
- font-weight: 400;
- color: #ffffff;
- line-height: 32px;
- text-indent: 1em;
- }
- $bgc: rgba(255, 255, 255, 0.9);
- &::v-deep {
- .vl-tool-bar {
- .vl-tool-bar-item {
- background-color: transparent;
- }
- }
- .vl-legend {
- border: 1px solid #0660b8;
- .legend-panel {
- // background: $bgc;
- background: #02285c;
- color: #00edff;
- .legend-title {
- background: transparent;
- border-bottom: 1px solid #0660b8;
- }
- }
- }
- .vl-layer-tree {
- .layer-dropdown {
- background-color: $bgc;
- }
- }
- }
- .feature-overlay {
- z-index: 999;
- // min-width: 331px;
- // max-width: 400px;
- width: 295px;
- // min-height: 186px;
- // background: url(~@/assets/project/map-overlay.png) no-repeat;
- // background-size: 100% 100%;;
- // padding: 2px 6px 20px;
- color: white;
- background: #fff;
- z-index: 999;
- position: absolute;
- top: 80px;
- right: 20px;
- .title {
- font-size: 18px;
- line-height: 30px;
- font-weight: 600;
- // background: linear-gradient(270deg, #47c4fa 0%, #2390ee 100%);
- background: #2390ee;
- // border-radius: 10px 10px 0px 0px;
- padding-left: 16px;
- .title-label {
- font-size: 16px;
- font-weight: normal;
- float: right;
- cursor: pointer;
- color: #00ffff;
- &:hover {
- font-weight: bolder;
- }
- }
- .detail {
- font-size: 16px;
- color: #22f3e2;
- cursor: pointer;
- margin-left: 5px;
- }
- }
- .section5 {
- padding: 0 20px 10px;
- .name {
- font-weight: 600;
- padding: 10px 0;
- font-size: 17px;
- color: #333333;
- line-height: 22px;
- cursor: default;
- .detail {
- cursor: pointer;
- margin-left: 5px;
- background: #00b9d6;
- border-radius: 3px;
- font-size: 15px;
- color: #ffffff;
- padding: 0 8px;
- }
- }
- table {
- width: 100%;
- font-size: 15px;
- line-height: 15px;
- td,
- th {
- padding: 3px 0;
- }
- th {
- padding-right: 0.5em;
- word-break: keep-all;
- font-weight: normal;
- color: #666666;
- width: 4.3em;
- }
- td {
- min-width: 3em;
- color: #333333;
- font-weight: bold;
- }
- td + th {
- padding-left: 0.5em;
- }
- }
- }
- }
- .modalBox {
- position: fixed;
- top: 0px;
- bottom: 0px;
- left: 0px;
- right: 0px;
- margin: auto;
- z-index: 999999999;
- background-color: rgba(0,0,0,.8);
- >.close {
- display: block;
- width: 20px;
- height: 20px;
- position: absolute;
- top: 25px;
- right: 25px;
- z-index: 99999999;
- background: url("../../../assets/images/bjybz/close.png") no-repeat;
- background-size: 100% 100%;
- cursor: pointer;
- }
- >.modalContent {
- position: absolute;
- top: 15px;
- bottom: 15px;
- left: 15px;
- right: 15px;
- margin: auto;
- background-color: #fff;
- >iframe {
- width: 100%;
- height: 100%;
- border: 0px;
- }
- }
- }
- .ivu-spin-fix {
- z-index: 0 !important;
- background-color: unset;
- color: white;
- background-image: $mask-bgc;
- }
- }
- </style>
|