maptalks圖層交互 - 模擬 Tooltip
圖層交互-模擬tooltip官方文檔
<!DOCTYPE html>
<html><meta charset='UTF-8' /><meta name='viewport' content='width=device-width, initial-scale=1' /><title>圖層交互 - 模擬 Tooltip</title><style type='text/css'>html,body {width: 100%;height: 100%;margin: 0px;}.container {background-color: #444444;width: 100%;height: 100%;}.marker-info {font-size: 14px;color: #fff;/* text-shadow: 2px 0 white; */background-color: rgba(0, 0, 0, 0.7);border: 1px solid rgba(255, 255, 255, 0.7);/* width: 120px; */min-width: 60px;height: auto;line-height: 20px;text-align: center}</style><link rel='stylesheet' href='https://maptalks.com/api/maptalks-gl.css' /><script type='text/javascript' src='https://maptalks.com/api/maptalks-gl.js'></script><body><script type="text/javascript" src="/lib/mt.gui.min.js"></script><div id="map" class="container"></div><script>const map = new maptalks.Map("map", {center: [-74.00912099912109, 40.71107610933129],zoom: 16,lights: {directional: {direction: [1, 0, -1],color: [1, 1, 1]},ambient: {resource: {// url: {// front: "/resources/hdr/gradient/front.png",// back: "/resources/hdr/gradient/back.png",// left: "/resources/hdr/gradient/left.png",// right: "/resources/hdr/gradient/right.png",// top: "/resources/hdr/gradient/top.png",// bottom: "/resources/hdr/gradient/bottom.png"// },prefilterCubeSize: 1024},hsv: [0, 0.34, 0],orientation: 0}}});/**start**/const style = {style: [{name: 'area-fill',filter: true,renderPlugin: {dataConfig: {type: "fill"},sceneConfig: {},type: "fill"},symbol: {polygonFill: "#996247",polygonOpacity: 1}},{name: 'area-border',filter: true,renderPlugin: {dataConfig: {type: "line"},sceneConfig: {},type: "line"},symbol: {lineColor: "#E2E2E2",lineOpacity: 1,lineWidth: 2}}]};const geo = new maptalks.GeoJSONVectorTileLayer("geo", {data: "/resources/geojson/area.geojson",style});geo.on("dataload", (e) => {map.fitExtent(e.extent);});const highLightKey = 'test';function highLight(feature, layer) {layer.highlight([{id: feature.id,plugin: 'area-fill',name: highLightKey,color: 'red'}]);}function cancel(layer) {layer.cancelHighlight([highLightKey]);}map.on('mousemove', e => {const data = geo.identify(e.coordinate);if (!data || !data.length) {cancel(geo);uiMarker.remove();return;}const feature = data[data.length - 1].data.feature;highLight(feature, geo);showInfo(e.coordinate, feature);// console.log(data[0]);})function getMarkerContent(feature) {return `<div class="marker-info">${feature.properties.name}</div>`;}function showInfo(coordinate, feature) {if (!uiMarker.getMap()) {uiMarker.addTo(map);}uiMarker.setContent(getMarkerContent(feature));uiMarker.setCoordinates(coordinate);}var uiMarker = new maptalks.ui.UIMarker(map.getCenter(), {content: '<div class="text_marker">maptalks</div>',dy: 30});/**end**/const groupLayer = new maptalks.GroupGLLayer("group", [geo], {sceneConfig: {environment: {enable: true,mode: 1,level: 0,brightness: 0}}});groupLayer.addTo(map);</script></body></html>
的d軸和q軸電流，考慮交叉耦合補償，設計P1控制器并推導出相應的傳遞函數)
思維鏈激發LLM推理能力)
